How can you combine arrays in Javascript that are multidimensional?

Question

How can you combine arrays in Javascript that are multidimensional?

Thank you for providing your responses. I appreciate the correct answers you shared based on the question. The error in the question was a result of my oversight, as I failed to include collecting the amount paid when combining user names. I am in the process of restructuring the code for accuracy.

const array =[
{
  name: 'Iphone',
  date: '01.01.2024',
  img: 'img/iphone.png',
  cost: 2500,
  paid: 500,
  username:"Joe",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 200,
  username:"Adam",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 100,
  username:"Alvin",
}
]

The data retrieved from my database requires a new arrangement to be combined effectively. Specifically, the sum of values in the Paid field needs to be calculated accordingly.

const array =[
{
 name: 'Iphone',
 date: '01.01.2024',
 img: 'img/iphone.png',
 cost: 2500,
 paid: 500,
 username:"Joe",
},
{
 name: 'Samsung',
 date: '01.01.2024',
 img: 'img/samsung.png',
 cost: 2000,
 paid: 300,   <---  accumulated paid amount from 2 Samsung entries
 usernames:[
   {username : "Adam"},
   {username : "Alvin"}
   ]
 }
]

javascript arrays mergesort

Answer 1

Answer №1

const products = [
    {
        name: 'Iphone',
        date: '01.01.2024',
        img: 'img/iphone.png',
        cost: 2500,
        username: 'Joe',
    },
    {
        name: 'Samsung',
        date: '01.01.2024',
        img: 'img/samsung.png',
        cost: 2000,
        username: 'Adam',
    },
    {
        name: 'Samsung',
        date: '01.01.2024',
        img: 'img/samsung.png',
        cost: 2000,
        username: 'Alvin',
    },
];

const updatedProducts = products.reduce((acc, current) => {
    const foundProduct = acc.find(
        (existingProduct) =>
            existingProduct.name === current.name &&
            existingProduct.date === current.date &&
            existingProduct.img === current.img &&
            existingProduct.cost === current.cost
    );

    if (foundProduct) {
        foundProduct.usernames.push({ username: current.username });
    } else {
        acc.push({
            name: current.name,
            date: current.date,
            img: current.img,
            cost: current.cost,
            usernames: [{ username: current.username }],
        });
    }

    return acc;
}, []);

This snippet uses the reduce method to iterate over an array of products and transform them into a new array with unique entries based on specific criteria. If a product with matching attributes already exists in the accumulator, it adds the username to its list of usernames. Otherwise, it creates a new object with the username as the initial entry in the usernames array.

Answer 2

const products = [
    {
        name: 'Iphone',
        date: '01.01.2024',
        img: 'img/iphone.png',
        cost: 2500,
        username: 'Joe',
    },
    {
        name: 'Samsung',
        date: '01.01.2024',
        img: 'img/samsung.png',
        cost: 2000,
        username: 'Adam',
    },
    {
        name: 'Samsung',
        date: '01.01.2024',
        img: 'img/samsung.png',
        cost: 2000,
        username: 'Alvin',
    },
];

const updatedProducts = products.reduce((acc, current) => {
    const foundProduct = acc.find(
        (existingProduct) =>
            existingProduct.name === current.name &&
            existingProduct.date === current.date &&
            existingProduct.img === current.img &&
            existingProduct.cost === current.cost
    );

    if (foundProduct) {
        foundProduct.usernames.push({ username: current.username });
    } else {
        acc.push({
            name: current.name,
            date: current.date,
            img: current.img,
            cost: current.cost,
            usernames: [{ username: current.username }],
        });
    }

    return acc;
}, []);

This snippet uses the reduce method to iterate over an array of products and transform them into a new array with unique entries based on specific criteria. If a product with matching attributes already exists in the accumulator, it adds the username to its list of usernames. Otherwise, it creates a new object with the username as the initial entry in the usernames array.

Answer 3

Answer №2

To improve performance, create a tree structure of property values with unique objects by all fields except the `username` field. This code is flexible and supports any number of properties. It can be encapsulated in a function where the array property name is passed as a parameter.

const result = array.reduce(((cached, keys, lastKey) => (r, item) => {
  if(!keys){
    keys = Object.keys(item).filter(key => key !== 'username');
    lastKey = keys.pop();
  }
  let node = cached;
  for(const key of keys){
    node = node[item[key]] ??= {};
  }
  const found = node[item[lastKey]];
  if(!found){
     r[r.length] = node[item[lastKey]] = {...item};
  }else{
    if(found.usernames){
      found.usernames.push({username: item.username});
    }else{
      found.usernames = [{username: found.username}, {username: item.username}];
      delete found.username;
    }
  }
  return r;
})({}), []);

console.log(result);

<script>
const array=[{name:"Iphone",date:"01.01.2024",img:"img/iphone.png",cost:2500,username:"Joe"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Adam"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Alvin"}];
</script>

` Chrome/120
-------------------------------------------------------
Alexander   1.00x  |  x1000000  660  680  683  719  745
Carsten     1.19x  |  x1000000  783  828  836  842  846
-------------------------------------------------------
https://github.com/silentmantra/benchmark `

// @benchmark Carsten     

Object.values(array.reduce((a,c)=>{
 const k=c.name+c.date+c.img+c.cost;
 if (!a[k]){ a[k]={...c, usernames:[]}; delete a[k].username;}
 a[k].usernames.push(c.username);
 return a;
},{}));


// @benchmark Alexander

array.reduce(((cached, keys, lastKey) => (r, item) => {
  if(!keys){
    keys = Object.keys(item).filter(key => key !== 'username');
    lastKey = keys.pop();
  }
  let node = cached;
  for(const key of keys){
    node = node[item[key]] ??= {};
  }
  const found = node[item[lastKey]];
  if(!found){
     r[r.length] = node[item[lastKey]] = {...item};
  }else{
    if(found.usernames){
      found.usernames.push({username: item.username});
    }else{
      found.usernames = [{username: found.username}, {username: item.username}];
      delete found.username;
    }
  }
  return r;
})({}), []);

/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));

<script>
const array=[{name:"Iphone",date:"01.01.2024",img:"img/iphone.png",cost:2500,username:"Joe"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Adam"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Alvin"}];
</script>

Answer 4

To improve performance, create a tree structure of property values with unique objects by all fields except the `username` field. This code is flexible and supports any number of properties. It can be encapsulated in a function where the array property name is passed as a parameter.

const result = array.reduce(((cached, keys, lastKey) => (r, item) => {
  if(!keys){
    keys = Object.keys(item).filter(key => key !== 'username');
    lastKey = keys.pop();
  }
  let node = cached;
  for(const key of keys){
    node = node[item[key]] ??= {};
  }
  const found = node[item[lastKey]];
  if(!found){
     r[r.length] = node[item[lastKey]] = {...item};
  }else{
    if(found.usernames){
      found.usernames.push({username: item.username});
    }else{
      found.usernames = [{username: found.username}, {username: item.username}];
      delete found.username;
    }
  }
  return r;
})({}), []);

console.log(result);

<script>
const array=[{name:"Iphone",date:"01.01.2024",img:"img/iphone.png",cost:2500,username:"Joe"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Adam"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Alvin"}];
</script>

` Chrome/120
-------------------------------------------------------
Alexander   1.00x  |  x1000000  660  680  683  719  745
Carsten     1.19x  |  x1000000  783  828  836  842  846
-------------------------------------------------------
https://github.com/silentmantra/benchmark `

// @benchmark Carsten     

Object.values(array.reduce((a,c)=>{
 const k=c.name+c.date+c.img+c.cost;
 if (!a[k]){ a[k]={...c, usernames:[]}; delete a[k].username;}
 a[k].usernames.push(c.username);
 return a;
},{}));


// @benchmark Alexander

array.reduce(((cached, keys, lastKey) => (r, item) => {
  if(!keys){
    keys = Object.keys(item).filter(key => key !== 'username');
    lastKey = keys.pop();
  }
  let node = cached;
  for(const key of keys){
    node = node[item[key]] ??= {};
  }
  const found = node[item[lastKey]];
  if(!found){
     r[r.length] = node[item[lastKey]] = {...item};
  }else{
    if(found.usernames){
      found.usernames.push({username: item.username});
    }else{
      found.usernames = [{username: found.username}, {username: item.username}];
      delete found.username;
    }
  }
  return r;
})({}), []);

/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));

<script>
const array=[{name:"Iphone",date:"01.01.2024",img:"img/iphone.png",cost:2500,username:"Joe"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Adam"},{name:"Samsung",date:"01.01.2024",img:"img/samsung.png",cost:2e3,username:"Alvin"}];
</script>

Answer 5

Answer №3

Begin by obtaining the distinct phone models.

Next, loop through each model and locate the corresponding phone data, extracting all attributes into a new object. Then, include all user names associated with that particular phone model.

To finalize, if there are multiple user names, remove the individual username property from each object in the resulting array, leaving only a usernames property at the top level. If there is just one username, keep it and eliminate the usernames property.

const array = [{"name":"Iphone","date":"01.01.2024","img":"img/iphone.png","cost":2500,"username":"Joe"},{"name":"Samsung","date":"01.01.2024","img":"img/samsung.png","cost":2000,"username":"Adam"},{"name":"Samsung","date":"01.01.2024","img":"img/samsung.png","cost":2000,"username":"Alvin"}]

let names = [...new Set(array.map(i=>i.name))]

let array2 = names.map(name => ({
  ...array.find(i => i.name===name),
  usernames: array.filter(i => i.name===name)
                  .map(({username}) => ({username}))
}))

array2.forEach(i => {
  if(i.usernames.length > 1) delete i.username
  else delete i.usernames
})

console.log(array2)

Answer 6

Begin by obtaining the distinct phone models.

Next, loop through each model and locate the corresponding phone data, extracting all attributes into a new object. Then, include all user names associated with that particular phone model.

To finalize, if there are multiple user names, remove the individual username property from each object in the resulting array, leaving only a usernames property at the top level. If there is just one username, keep it and eliminate the usernames property.

const array = [{"name":"Iphone","date":"01.01.2024","img":"img/iphone.png","cost":2500,"username":"Joe"},{"name":"Samsung","date":"01.01.2024","img":"img/samsung.png","cost":2000,"username":"Adam"},{"name":"Samsung","date":"01.01.2024","img":"img/samsung.png","cost":2000,"username":"Alvin"}]

let names = [...new Set(array.map(i=>i.name))]

let array2 = names.map(name => ({
  ...array.find(i => i.name===name),
  usernames: array.filter(i => i.name===name)
                  .map(({username}) => ({username}))
}))

array2.forEach(i => {
  if(i.usernames.length > 1) delete i.username
  else delete i.usernames
})

console.log(array2)

Answer 7

Answer №4

A suggestion is to utilize a basic array structure for storing usernames. Here is a potential solution incorporating this approach:

const arr =[
{
  name: 'Apple',
  date: '01.01.2024',
  img: 'img/apple.png',
  cost: 2500,
  paid: 500,
  username:"John",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 200,
  username:"Alice",
},
{
  name: 'LG',
  date: '01.01.2024',
  img: 'img/lg.png',
  cost: 1800,
  paid: 100,
  username:"Ethan",
}];

const res=Object.values(arr.reduce((a,c)=>{
 const k=c.name+c.date+c.img+c.cost;
 if (!a[k]){ a[k]={...c, userlist:[]}; delete a[k].username;}
 else a[k].paid+=c.paid; 
 a[k].userlist.push(c.username);
 return a;
},{}));

console.log(res);

Answer 8

A suggestion is to utilize a basic array structure for storing usernames. Here is a potential solution incorporating this approach:

const arr =[
{
  name: 'Apple',
  date: '01.01.2024',
  img: 'img/apple.png',
  cost: 2500,
  paid: 500,
  username:"John",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 200,
  username:"Alice",
},
{
  name: 'LG',
  date: '01.01.2024',
  img: 'img/lg.png',
  cost: 1800,
  paid: 100,
  username:"Ethan",
}];

const res=Object.values(arr.reduce((a,c)=>{
 const k=c.name+c.date+c.img+c.cost;
 if (!a[k]){ a[k]={...c, userlist:[]}; delete a[k].username;}
 else a[k].paid+=c.paid; 
 a[k].userlist.push(c.username);
 return a;
},{}));

console.log(res);

How can you combine arrays in Javascript that are multidimensional?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

`The server fails to retrieve parameters passed through an angularJS HTTP GET request,

Provide Jquery with a named function for success plus some extra perplexity

How can I show the table row as an inner table row when the first field is identical?

Tips for ensuring that the first div of a collapsible div remains expanded whenever a dropdown is changed in AngularJS

How can I incorporate Bootstrap multi-select into the jQuery DataTables DOM?

Encountering a CORS header issue while working with the Authorization header

The function url_for is failing to interpret the variables I am passing to

Identifying the absence of a character at the end of the last line in Node.js to detect

In JavaScript, the function is unable to access elements within an iteration of ng-repeat

Issue with Dijit form fields failing to render correctly following dojo.destroy and dojo.place operations

Alter elements in HTML dynamically based on the value of a cookie

What is the most efficient way to create a bufferGeometry with multiple particle sizes for optimal performance?

Perform the Checkbox action when it is marked

Is there a method to verify if a GeoJSON feature is in the shape of a rectangle and locate its corner coordinates?

Jest: A guide on mocking esModule methods

Controlling the Quantity of Selected Checkboxes with JavaScript

Tips for creating an effective dark mode toggle switch on a website

Adding data to a JavaScript array with two dimensions

using javascript to create two choices

Are there any PHP methods available for imploding an associative array while retaining the keys intact?