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.

CodePudding user response：

Logic.

• get all object values
• flat that array.
• filter down the list that only contain iso6393Char3Code as eng. (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);

CodePudding user response：

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));

CodePudding user response：

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);