I have two arrays of objects:

const headers = [
  {
    ID: "1",
    Header: "General",
  },
  {
    ID: "2",
    Header: "Misc",
  },
  ...
]

const terms = [
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },      
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "Misc",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  ...
]

And I would like to have one object that has each header as a key and with an array of all the terms as the values:

{
  "General: [
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    }
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    ...
  ],
  "Misc": [
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    ...
  ],
  ...
}

I'm guessing that there is a way to do it with .map .foreach .filter or some combination, but have been hitting a wall all day. Including just trying to put the problem into words of what I am trying to do here so I can find better search results. Any help would appreciated. Thanks!

CodePudding user response：

You can use a combination of reduce and forEach to get your result. This would only have to loop through your arrays once, instead of looping through terms twice, as would happen with nested forEach loops.

const obj = headers.reduce((a, o) => { a[o.Header] = []; return a; }, {});
terms.forEach(({ Header, ...x }) => obj[Header].push(x));

Explanation: The reduce converts from an array to an object. Then the forEach loops through and adds the terms to the newly created object.

Here's a working example:

Show code snippet

const headers = [
  {
    ID: '1',
    Header: 'General',
  },
  {
    ID: '2',
    Header: 'Misc',
  },
];

const terms = [
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'Misc',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
];

const obj = headers.reduce((a, o) => { a[o.Header] = []; return a; }, {});
terms.forEach(({ Header, ...x }) => obj[Header].push(x));
console.log(obj);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

A basic way to do it if you're not needing additional properties would be:

const outputObj = {}
headers.forEach(header => {
    const headerArr = outputObj[header.Header] = [];
    terms.forEach(term => {
        const {Header, Term, Definition} = term;
        if (Header === header.Header) {
            headerArr.push({Term, Definition});
        }
    })
})

This would loop through each header and add the Header property as a key with an empty array, then the second loop would go through the terms and add just the Term and Definition (omitting the Header).

CodePudding user response：

You can make use of forEach here as:

const dict = {};
headers.forEach(({ Header }) => (dict[Header] = []));
terms.forEach(({ Header, ...rest }) => dict[Header].push(rest));
console.log(dict);

const headers = [
  {
    ID: "1",
    Header: "General",
  },
  {
    ID: "2",
    Header: "Misc",
  },
];

const terms = [
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "Misc",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
];

const dict = {};
headers.forEach(({ Header }) => (dict[Header] = []));
terms.forEach(({ Header, ...rest }) => dict[Header].push(rest));
console.log(dict);

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>