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.
Logic.
iso6393Char3Code as eng. (You have generated the output Array here).names in this Arrayconst 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);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));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);