There are mainData and GroupData arrays.　　
I would like to create a newData-like array by combining the mainData id and GroupData.
The condition is that the id of mainData and groupId of GroupData are the same.　
I tried to implement the following but the following error occurs.

error

TypeError: Cannot set properties of undefined (setting 'type')

'item' is never reassigned. Use 'const' instead.eslint

        const mainData = [
          { id: 1, name: 'aaa' },
          { id: 2, name: 'bbb' },
          { id: 3, name: 'ccc' },
          { id: 4, name: 'ddd' },
        ];

        const groupData = [
          { id: 1, type: 1, groupId: 1, context: 'test' },
          { id: 2, type: 2, groupId: 1, context: 'txt' },
          { id: 3, type: 3, groupId: 1, context: 'hoge' },
          { id: 4, type: 1, groupId: 1, context: 'hoge' },
          { id: 5, type: 2, groupId: 1, context: 'test' },
          { id: 6, type: 2, groupId: 2, context: 'test' },
          { id: 7, type: 1, groupId: 3, context: 'test' },
          { id: 8, type: 1, groupId: 3, context: 'test' },
          { id: 9, type: 1, groupId: 4, context: 'test' },
        ];

  const mainData = [
    { id: 1, name: 'aaa' },
    { id: 2, name: 'bbb'},
    { id: 3, name: 'ccc' },
    { id: 4, name: 'ddd' },
  ];

  const groupData = [
    { id: 1, type: 1, groupId: 1, context: 'test' },
    { id: 2, type: 2, groupId: 1, context: 'txt' },
    { id: 3, type: 3, groupId: 1, context: 'hoge' },
    { id: 4, type: 1, groupId: 1, context: 'hoge' },
    { id: 5, type: 2, groupId: 1, context: 'test' },
    { id: 6, type: 2, groupId: 2, context: 'test' },
    { id: 7, type: 1, groupId: 3, context: 'test' },
    { id: 8, type: 1, groupId: 3, context: 'test' },
    { id: 9, type: 1, groupId: 4, context: 'test' },
  ];

const newData = [
  {
    id: 1,
    name: 'aaa',
    content: [
      { type: 1, context: 'test' },
      { type: 2, context: 'txt' },
      { type: 3, context: 'hoge' },
      { type: 1, context: 'hoge' },
      { type: 2, context: 'test' },
    ],
  },
  {
    id: 2,
    name: 'bbb',
    content: [{ type: 2 context: 'test' }],
  },
  {
    id: 3,
    name: 'ccc',
    content: [
      { type: 1 context: 'test' },
      { type: 1, context: 'test' },
    ],
  },
  {
    id: 4,
    name: 'ddd',
    content: [{ type: 1, context: 'test' }],
  },
];

        type NewDataType = {
          id: number;
          name: string;
          content: Content[];
        };
        type Content = {
          type: number;
          content: string;
        };
        mainData.map(m => {
          const blocks: NewDataType[] = [];
          groupData.map(g => {
            const sameGroups = groupData.filter(i => i.groupId === m.id);
            let item: Content[] = [];

            if (sameGroups) {
              sameGroups.map((i, index) => {
                item[index].type = i.type;
                item[index].content = i.context;
              });
            }
            blocks.push({
              id: m.id,
              name: m.name,
              content: item,
            });
          });
        });

CodePudding user response：

As far as I understand your question you want to combine mainData and groupData to end up with newData. My approach would be

  const mainData = [
      { id: 1, name: 'aaa' },
      { id: 2, name: 'bbb' },
      { id: 3, name: 'ccc' },
      { id: 4, name: 'ddd' },
    ];

 const groupData = [
      { id: 1, type: 1, groupId: 1, context: 'test' },
      { id: 2, type: 2, groupId: 1, context: 'txt' },
      { id: 3, type: 3, groupId: 1, context: 'hoge' },
      { id: 4, type: 1, groupId: 1, context: 'hoge' },
      { id: 5, type: 2, groupId: 1, context: 'test' },
      { id: 6, type: 2, groupId: 2, context: 'test' },
      { id: 7, type: 1, groupId: 3, context: 'test' },
      { id: 8, type: 1, groupId: 3, context: 'test' },
      { id: 9, type: 1, groupId: 4, context: 'test' },
    ];

let newData = [];

mainData.forEach(mainDataElement => {
    const newDataElement = {
           "id":  mainDataElement.id,
           "name":  mainDataElement.name,
           "content" : []
    }
    groupData
    .filter(groupDataElement => mainDataElement.id === groupDataElement.groupId)
    .forEach(element => {
        newDataElement.content.push(JSON.stringify(element));
        });
    newData.push(newDataElement);
});

console.log(newData);
console.log("Done");

CodePudding user response：

you can use lodash to combine arrays with conditions

_.merge(_.keyBy(array1, 'id'), _.keyBy(array2, 'id'));