Combine an array of objects using the main key in each object

Question

Combine an array of objects using the main key in each object

I have an array of objects with different years and details

var worksSummaryDetailsArr = [
  {
    year: 2020,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  },
  {
    year: 2021,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  },
  {
    year: 2022,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  },
  {
    year: 2021,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  },
  {
    year: 2022,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  }
]

My goal is to merge the array based on the same year while concatenating the worksSummaryDetailsObj together


  {
    year: 2020,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ]
  },
  {
    year: 2021,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object],[Object], [Object], [Object], [Object] ]
  },
  {
    year: 2022,
    worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object],[Object], [Object], [Object], [Object] ]
  },

Although I attempted to achieve this using the set function and mapping with the same year, I encountered issues with incorrect data in worksSummaryDetailsObj

Below is the code snippet I tried:


const r = [...new Set(worksSummaryDetailsArr.map((i) => i.year))].map((i) => ({
      year: i,
      worksSummaryDetailsObj: [...new Set(worksSummaryDetailsArr.filter(({ year: c }) => c === i))],
}));

console.log(r);

javascript arrays json object

Answer 1

Answer №1

By implementing a simple reduction and merging of arrays, you can achieve your desired result

Object.values(
  worksSummaryDetailsArr.reduce((acc, arr) => {
    if (!acc[arr.year]) {
      acc[arr.year] = arr;
    } else {
      acc[arr.year] = {
        ...acc[arr.year],
        worksSummaryDetailsObj: [
          ...acc[arr.year].worksSummaryDetailsObj,
          ...arr.worksSummaryDetailsObj,
        ],
      };
    }
    return acc;
  }, {})
);

Answer 2

By implementing a simple reduction and merging of arrays, you can achieve your desired result

Object.values(
  worksSummaryDetailsArr.reduce((acc, arr) => {
    if (!acc[arr.year]) {
      acc[arr.year] = arr;
    } else {
      acc[arr.year] = {
        ...acc[arr.year],
        worksSummaryDetailsObj: [
          ...acc[arr.year].worksSummaryDetailsObj,
          ...arr.worksSummaryDetailsObj,
        ],
      };
    }
    return acc;
  }, {})
);

Combine an array of objects using the main key in each object

Answer №1

Similar questions

Retrieving a page using jQuery

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Guidance on creating a custom color selection tool for a specific task

Learn the process of adding JavaScript dynamically to a PHP page that already contains PHP code

What could be the reason for the failure of this GET route in the jest test?

Reading and processing Json data with a Rest Client and Object Mapper

Using jquery, transform json data into html table format

Automatically bypassing git conflicts in package.json: A step-by-step guide

Develop a JSON schema using a collection of Java Plain Old Java Object (Pojo) classes

Include buttons in the HTML template once JSON data has been received

Enhance your textbox with more detailed descriptions than just displaying NaN

Creating a Page with Python Selenium for JavaScript Rendering

Utilizing Material-UI TextField with targeted onChange event handler

Enhance the connectivity of Angular js by activating the link function post transclusion

ShadowBox not displaying Vimeo videos

Innovative Inter-Browser Link with a Distinct Shape

Convert a single JSONObject into a JSONArray

Combining two JSON arrays into a single array using Node.js

Playing a game of rock, paper, scissors with two players using JavaScript

Webpack is failing to load the logo PNG image file