Combining two arrays with identical IDs using Angular or JavaScript - a step-by-step guide

Question

Combining two arrays with identical IDs using Angular or JavaScript - a step-by-step guide

As a newcomer to Angular and JavaScript, I am attempting to combine values with the same ID into one row using concatenation.

var array = [{
            id: "410",
            value: "val1"
        }, {
            id: "411",
            value: "val1"
        }, {
            id: "412",
            value: "val4"
        },{
            id: "410",
            value: "val2"];

            var output = [];

I hope for the desired output to look like this:

output = [
{id:"410", value:["val1","val2"]},
{id:"411", value:["val1"]},
{"id":412,value:["val4"]}]

Any assistance on achieving this would be greatly appreciated. Thank you in advance.

javascript angularjs

Answer 1

Answer №1

Please ensure that your value attribute is formatted as an array.

To achieve the desired result, consider utilizing the reduce function.

var array = [{ id: "410", value: "val1" }, 
             { id: "411", value: "val1" }, 
             { id: "412", value: "val4" }, 
             { id: "410", value: "val2"}];

var output = array.reduce((a, c) => {
  var id = c.id;
  var e = a.filter((e) => e.id == id)[0];
  if (e) {
    e.value.push(c.value);
  } else {
    a = [...a, ...[{ id: id, value: [c.value] }]];
  }
  
  return a;
}, []);

console.log(output);

Resource

Answer 2

Please ensure that your value attribute is formatted as an array.

To achieve the desired result, consider utilizing the reduce function.

var array = [{ id: "410", value: "val1" }, 
             { id: "411", value: "val1" }, 
             { id: "412", value: "val4" }, 
             { id: "410", value: "val2"}];

var output = array.reduce((a, c) => {
  var id = c.id;
  var e = a.filter((e) => e.id == id)[0];
  if (e) {
    e.value.push(c.value);
  } else {
    a = [...a, ...[{ id: id, value: [c.value] }]];
  }
  
  return a;
}, []);

console.log(output);

Combining two arrays with identical IDs using Angular or JavaScript - a step-by-step guide

Answer №1

Resource

Similar questions

Issue with Ajax/Json: "An object of type triggers a circular reference error when attempting to retrieve a list."

Altering the properties of every item within a v-for loop's array

jQuery does not pass data to bootstrap modal

Having trouble getting Emberjs to properly handle an Ajax POST request

What is the best way to update a form without refreshing the DOM?

Invoke a PHP function located in a separate file using a JavaScript function to fetch data from a database

Performing queries using the ORM Sequelize to fetch data from two separate tables simultaneously during a single page

Error message: Unknown scope- unable to process 'files-path' Android File provider issue

Utilizing Reactjs to dynamically populate Bootstrap grids: A step-by-step guide

AngularJS UI-Router homepage route

Typescript headaches: Conflicting property types with restrictions

Find the current elapsed time using Wavesurfer in real time

`"Error: posts.map is not a function" - What steps can be taken to resolve this issue?`

Looking to display several charts on a single page with varying datasets?

How can TypeScript objects be serialized?

Using data-image as the source for Bootstrap Modal

Changing a string into an array through an ajax request using javascript

Creating Hbbtv applications with the help of a Firefox Addon

React Native (or React) utilizes separate TypeScript modules to detect and respond to style adjustments for dark mode

What is the best way to modify an element's state based on the index array?