Merge two arrays in nested JSON

Asked by At

I have the following JSON

const data = {
  items: [
    {
      id: 1,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    },
    {
      id: 2,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    }
  ]
}

How can i get the two data arrays into a single array of 6 items? whenever i try to use reduce i just get two arrays...

2 Answers

0
CertainPerformance On

You can use flatMap and extract the data property:

const data = {
  items: [
    {
      id: 1,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    },
    {
      id: 2,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    }
  ]
};

const output = data.items.flatMap(({ data }) => data);
console.log(output);

Or, without flatMap:

const data = {
  items: [
    {
      id: 1,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    },
    {
      id: 2,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    }
  ]
};

const output = data.items.reduce((a, { data }) => {
  a.push(...data);
  return a;
}, []);
console.log(output);

0
saurabh On

simple use spread operator: exapmle:

[...data.items[0].data, ...data.items[1].data]

const data = {
  items: [
    {
      id: 1,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    },
    {
      id: 2,
      data: [
        {
          content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
        },
        {
          content: `Fusce et lectus eu tellus blandit varius.`,
        },
        {
          content: `Suspendisse ut est rhoncus, pretium tellus nec, aliquet purus`,
        }
      ]
    }
  ]
};
/*using spred operator*/
console.log([...data.items[0].data, ...data.items[1].data]);