'How to filter an object of arrays that have a top level property?
I have an array like so:
{
"1596": [
{
"divisionCategoryID_PK": 1596,
"name": "metropolitan region",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1597,
"name": "région métropolitaine",
"iso6393Char3Code": "fra",
}
],
"1597": [
{
"divisionCategoryID_PK": 1598,
"name": "metropolitan department",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1599,
"name": "département métropolitain",
"iso6393Char3Code": "fra",
}
],
.....and so on...
}
Note: The above is a shortened example for this question (there are over 100+ items in the array).
I want to build a drop down menu where users can select an item from the array. I want to only show the english version of these items (eng) and so the only items they can select would be like so (ids for each item should be available for the options value).
Required output structure:
[
{
divisionCategoryID_PK,
name,
iso6393Char3Code
},
{
divisionCategoryID_PK,
name,
iso6393Char3Code
},
...so on..
]
I can make the form input, I just need help with creating the options list for the select menu element. How do I create the new array when there is a "top level" property above it (ie, 1596, etc)? The 1596, 1597 part is throwing me off. Hope my question makes sense.
Solution 1:[1]
const obj = {
1596: [
{
divisionCategoryID_PK: 1596,
name: 'metropolitan region',
iso6393Char3Code: 'eng',
},
{
divisionCategoryID_PK: 1597,
name: 'région métropolitaine',
iso6393Char3Code: 'fra',
},
],
1597: [
{
divisionCategoryID_PK: 1598,
name: 'metropolitan department',
iso6393Char3Code: 'eng',
},
{
divisionCategoryID_PK: 1599,
name: 'département métropolitain',
iso6393Char3Code: 'fra',
},
],
};
const format = (obj) => {
const arr = [];
for (const ob of Object.values(obj).flat()) {
if (ob.iso6393Char3Code === 'eng') arr.push(ob);
}
return arr;
};
console.log(format(obj));
Solution 2:[2]
Logic.
- get all object values
- flat that array.
- filter down the list that only contain
iso6393Char3Codeaseng. (You have generated the output Array here). - Pick out the
names in this Array
const data = {
"1596": [
{
"divisionCategoryID_PK": 1596,
"name": "metropolitan region",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1597,
"name": "région métropolitaine",
"iso6393Char3Code": "fra",
}
],
"1597": [
{
"divisionCategoryID_PK": 1598,
"name": "metropolitan department",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1599,
"name": "département métropolitain",
"iso6393Char3Code": "fra",
}
],
};
const objects = Object.values(data).flat().filter(item => item.iso6393Char3Code === "eng")
console.log(objects);
const names = objects.map(item => item.name);
console.log(names);
Solution 3:[3]
Try this way:
const yearsData = {
"1596": [{
"divisionCategoryID_PK": 1596,
"name": "metropolitan region",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1597,
"name": "région métropolitaine",
"iso6393Char3Code": "fra",
}
],
"1597": [{
"divisionCategoryID_PK": 1598,
"name": "metropolitan department",
"iso6393Char3Code": "eng",
},
{
"divisionCategoryID_PK": 1599,
"name": "département métropolitain",
"iso6393Char3Code": "fra",
}
]
};
const formattedData = Object.keys(yearsData).reduce((result, year) => {
result.push(yearsData[year].filter(data => data.iso6393Char3Code === 'eng')[0]);
return result;
}, []);
console.log(formattedData);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | mstephen19 |
| Solution 2 | |
| Solution 3 | EzioMercer |
