filtering array with multiple same properties

so I have an array of values like this

const foodsList = [
{
foodOrigin: "Padang",
foodName: "Nasi Padang",
originCode: "PDN"
},
{
foodOrigin: "Padang",
foodName: "Gulai",
originCode: "PDN"
},
{
foodOrigin: "Padang",
foodName: "Rendang",
originCode: "PDN"
},
{
foodOrigin: "Palembang",
foodName: "Pempek",
originCode: "PLG"
},
{
foodOrigin: "Palembang",
foodName: "Tekwan",
originCode: "PLG"
},
{
foodOrigin: "Yogyakarta",
foodName: "Gudeg",
originCode: "YKT"
}
];

and I want to filter the array so the result would be like this instead

const filteredFoodsList = [
{
foodOrigin: "Padang",
originCode: "PDN"
},
{
foodOrigin: "Palembang",
originCode: "PLG"
},
{
foodOrigin: "Yogyakarta",
originCode: "YKT"
}
];

In order to achieve the result, I tried doing it like below but is there a cleaner and better way to do this? ( especially since my actual array's data consist of more than 500 )

const filteredFoodsList = [];
for (let i = 0; i < foodsList.length; i++) {
if (i === 0) {
filteredFoodsList.push({
originCode: foodsList[i].originCode,
foodOrigin: foodsList[i].foodOrigin
});
}
let isExist = false;
for (let j = 0; j < filteredFoodsList.length; j++) {
if (foodsList[i].originCode === filteredFoodsList[j].originCode) {
isExist = true;
}
}
if (!isExist) {
filteredFoodsList.push({
originCode: foodsList[i].originCode,
foodOrigin: foodsList[i].foodOrigin
});
}
}

As the OP stated there should be some focus on performance, so..

The Map could be the fastest way to collect unique values.
(I've borrowed Array.from(map, ([originCode, foodOrigin]) => ({ foodOrigin, originCode })) from Nina's answer, really elegant).

But it doesn't affect the performance since the resulting array should be quite small.

But she forgot to include a Map::has() check that really improves the performance significantly.

What's important is how fast the source array is iterated. As always I see there can't be a faster thing than for(let i = 0; ...)...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const foodsList=[{foodOrigin:"Padang",foodName:"Gulai",originCode:"PDN"},{foodOrigin:"Padang",foodName:"Rendang",originCode:"PDN"},{foodOrigin:"Palembang",foodName:"Pempek",originCode:"PLG"},{foodOrigin:"Palembang",foodName:"Tekwan",originCode:"PLG"},{foodOrigin:"Yogyakarta",foodName:"Gudeg",originCode:"YKT"}];

const map = new Map;
for (let i = 0; i < foodsList.length; i++) {
const item = foodsList[i];
map.has(item.originCode) || map.set(item.originCode, item.foodOrigin);
}
const result = Array.from(map, ([originCode, foodOrigin]) => ({ foodOrigin, originCode }));
console.log(result);

<!-- end snippet -->

And a benchmark:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script benchmark data-count="1">
const chunk = [{ foodOrigin: "Padang", foodName: "Gulai", originCode: "PDN" }, { foodOrigin: "Padang", foodName: "Rendang", originCode: "PDN" }, { foodOrigin: "Palembang", foodName: "Pempek", originCode: "PLG" }, { foodOrigin: "Palembang", foodName: "Tekwan", originCode: "PLG" }, { foodOrigin: "Yogyakarta", foodName: "Gudeg", originCode: "YKT" }];
var foodsList = [];
let count = 10000000;
while (count--) {
foodsList.push(...chunk);
}
// @benchmark Peter's solution
foodsList
.reduce((collector, { foodOrigin, originCode = null }) => {
if (originCode !== null && !collector.lookup.has(foodOrigin)) {
collector.lookup.set(foodOrigin, true);
collector.result.push({
foodOrigin,
originCode,
});
}
return collector;
}, { lookup: new Map, result: [] }).result;
// @benchmark Nina's solution
Array.from(
foodsList.reduce((m, { foodOrigin, originCode }) => m.set(foodOrigin, originCode), new Map),
([foodOrigin, originCode]) => ({ foodOrigin, originCode })
);
// @benchmark Alexander's solution
const map = new Map;
for (let i = 0; i < foodsList.length; i++) {
const item = foodsList[i];
map.has(item.originCode) || map.set(item.originCode, item.foodOrigin);
}
Array.from(map, ([originCode, foodOrigin]) => ({ foodOrigin, originCode }));
// @benchmark Nina's improved
Array.from(
foodsList.reduce((m, { foodOrigin, originCode }) => {
m.has(foodOrigin) || m.set(foodOrigin, originCode);
return m;
}, new Map),
([foodOrigin, originCode]) => ({ foodOrigin, originCode })
);
</script>
<script src="https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js"></script>

<!-- end snippet -->

You could take a Map and get a new array from it.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const
foodsList = [{ foodOrigin: 'Padang', foodName: 'Gulai', originCode: 'PDN' }, { foodOrigin: 'Padang', foodName: 'Rendang', originCode: 'PDN' }, { foodOrigin: 'Palembang', foodName: 'Pempek', originCode: 'PLG' }, { foodOrigin: 'Palembang', foodName: 'Tekwan', originCode: 'PLG' }, { foodOrigin: 'Yogyakarta', foodName: 'Gudeg', originCode: 'YKT' }],
result = Array.from(
foodsList.reduce((m, { foodOrigin, originCode }) => m.set(foodOrigin, originCode), new Map),
([foodOrigin, originCode]) => ({ foodOrigin, originCode })
);

console.log(result);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; top: 0; }
<!-- end snippet -->

You can use an object to store the values

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const foodsList = [{
foodOrigin: 'Padang',
foodCode: 'SPI',
foodName: 'Nasi Padang',
}, {
foodOrigin: 'Padang',
foodName: 'Gulai',
originCode: 'PDN',
}, {
foodOrigin: 'Padang',
foodName: 'Rendang',
originCode: 'PDN',
}, {
foodOrigin: 'Palembang',
foodName: 'Pempek',
originCode: 'PLG',
}, {
foodOrigin: 'Palembang',
foodName: 'Tekwan',
originCode: 'PLG',
}, {
foodOrigin: 'Yogyakarta',
foodName: 'Gudeg',
originCode: 'YKT',
}]
const items = {}
for (const item of foodsList) {
if (item.originCode && !(item.originCode in items)) {
items[item.originCode] = item
}
}
const result = Object.values(items).map(({ originCode, foodName }) => ({ originCode, foodName }))
console.log(result)

<!-- end snippet -->

Here's my "old-fashioned" approach without Map usage:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const foodsList = [ { foodOrigin: "Padang", foodCode: "SPI", foodName: "Nasi Padang" }, { foodOrigin: "Padang", foodName: "Gulai", originCode: "PDN" }, { foodOrigin: "Padang", foodName: "Rendang", originCode: "PDN" }, { foodOrigin: "Palembang", foodName: "Pempek", originCode: "PLG" }, { foodOrigin: "Palembang", foodName: "Tekwan", originCode: "PLG" }, { foodOrigin: "Yogyakarta", foodName: "Gudeg", originCode: "YKT" }];
const filteredFoodsList = foodsList.reduce(
(acc, curr) =>
curr.originCode &&
!acc.some(a => a?.originCode === curr.originCode)
? [...acc, curr]
: acc,
[]
);
console.log(filteredFoodsList);

<!-- end snippet -->

The OP does not filter because not only the array is effected but also each of the array item's data-structure. It's also not mapping, which would allow the latter (changing an item's data), but always assures the same amount of array items.

The combination of filtering and altering data is a classical reduce task.

As for the OP's problem, not only does one need to extract unique item-data from a source-array, one also needs to implement a more bullet-proof solution due to the probable occurrence of incorrect data like ...

{ foodOrigin: "Padang", foodCode: "SPI", foodName: "Nasi Padang"` }

... versus its correct notation of ...

{ foodOrigin: "Padang", foodName: "Nasi Padang", originCode: "SPI" }

In order to come up with the least necessary iteration effort, one could implement a single reduce task in a way that one passes as the reduce method's 2nd parameter an object-based initial value which features two key-value pairs with the lookup-key holding a Map-reference and the result-key referencing an array.

With each iteration the callback reducer function receives such an object as its first parameter. It also has to return such an object either with changes to its data or not. The very object's Map reference will be used as one of the fastest possible ways of looking up whether a specific data has been already processed. The implementation would use a map's has method on that behalf.

In case a data-item of interest has not yet been processed, one would set an item specific entry at the very Map-based lookup. Additionally one would create a new, target-data specific object and push it into the result-array.

The latter also features the final result at the reduce task's return value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const foodsList = [{
foodOrigin: "Padang", foodCode: "SPI", foodName: "Nasi Padang"
// and not ...
// // foodOrigin: "Padang", foodName: "Nasi Padang", originCode: "SPI",
}, {
foodOrigin: "Padang", foodName: "Gulai", originCode: "PDN",
}, {
foodOrigin: "Padang", foodName: "Rendang", originCode: "PDN",
}, {
foodOrigin: "Palembang", foodName: "Pempek", originCode: "PLG",
}, {
foodOrigin: "Palembang", foodName: "Tekwan", originCode: "PLG",
}, {
foodOrigin: "Yogyakarta", foodName: "Gudeg", originCode: "YKT",
}];
const filteredFoodsList = foodsList
.reduce((collector, { foodOrigin, originCode = null }) => {
if (originCode !== null && !collector.lookup.has(foodOrigin)) {
collector.lookup.set(foodOrigin, true);
collector.result.push({
foodOrigin,
originCode,
});
}
return collector;
}, { lookup: new Map, result: [] }).result;
console.log({ filteredFoodsList });

<!-- language: lang-css -->

.as-console-wrapper { min-height: 100%!important; top: 0; }

<!-- end snippet -->

You can use Array.reduce as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const 
foodsList = [ { foodOrigin: "Padang", foodName: "Nasi Padang", originCode: "PDN" }, { foodOrigin: "Padang", foodName: "Gulai", originCode: "PDN" }, { foodOrigin: "Padang", foodName: "Rendang", originCode: "PDN" }, { foodOrigin: "Palembang", foodName: "Pempek", originCode: "PLG" }, { foodOrigin: "Palembang", foodName: "Tekwan", originCode: "PLG" }, { foodOrigin: "Yogyakarta", foodName: "Gudeg", originCode: "YKT" } ],
filteredFoodsList = foodsList.reduce(
(acc, {foodOrigin,originCode}) => acc.find(({originCode:oc}) => oc === originCode) ? acc : [...acc, {foodOrigin,originCode}], []
);
console.log( filteredFoodsList );

<!-- end snippet -->

This can done a lot more simply by constructing a Map from an array, then taking its values().

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const foodsList=[{foodOrigin:"Padang",foodName:"Nasi Padang",originCode:"PDN"},{foodOrigin:"Padang",foodName:"Gulai",originCode:"PDN"},{foodOrigin:"Padang",foodName:"Rendang",originCode:"PDN"},{foodOrigin:"Palembang",foodName:"Pempek",originCode:"PLG"},{foodOrigin:"Palembang",foodName:"Tekwan",originCode:"PLG"},{foodOrigin:"Yogyakarta",foodName:"Gudeg",originCode:"YKT"}];
const res = [...new Map(foodsList.map(({foodOrigin, originCode}) => 
[originCode, {foodOrigin, originCode}])).values()];
console.log(res);

<!-- end snippet -->