UPDATE: I should have asked in a better way. My bad. but I struggle to find a way to display it inside a table. I did use reduce() method for this which i got the result by looking at the console log

I am actually stuck on something. As the title above tells you. I need helps on how to get the result for this.

Below is the code

let arr = [{
  reference: "A2",
  sendTo: "USA",
  item: "sticker",
  sku: 0921380,
  quantity: 1
},
{
  reference: "A2",
  sendTo: "USA",
  item: "toy",
  sku: 0921381,
  quantity: 2
}, {
  reference: "A2",
  item: "pencil",
  sku: 0921382,
  quantity: 2
},
 {
  reference: "A3",
  item: "sticker",
  sendTo: "USA",
  sku: 0921380,
  quantity: 2
}]

console.log(Array)

Javascript I use for this issue (credits to people here for this too):

let newArr = arr.reduce((acc, curr) => {
   if(acc.some(obj => obj.reference === curr.reference)) {
       acc.forEach(obj => {
          if(obj.reference === curr.reference) {
          obj.sku = obj.sku   ", "   curr.sku
          obj.quantity = obj.quantity   ", "   curr.quantity
       }
     });
    } else {
        acc.push(curr)
      }
      return acc
    }, [])

Result after merging:

reference: A2
sendTo: USA
item: sticker, toy, pencil
sku: 0921380, 0921381, 0921382
quantity: 1, 2 ,2

reference: A3
item: sticker
sendTo: USA
sku: 0921380
quantity: 2

However, I need to make it appear inside a HTML Table as below:

| reference | sendTo | item    | sku      | quantity |
|----------------------------------------------------|
| A2          USA      sticker   0921380    1        |
|                      toy       0921381    2        |
|                      pencil    0921382    2        |
|----------------------------------------------------|
| A3          USA      sticker   0921380    2        |
|----------------------------------------------------|

CodePudding user response：

Use a reduce() for that.

let arr = [{
  reference: "A0002",
  sendTo: "USA",
  item: "sticker",
  sku: 0921380,
  quantity: 1
},
{
  reference: "A0002",
  sendTo: "USA",
  item: "toy",
  sku: 0921381,
  quantity: 2
}, {
  reference: "A0002",
  item: "pencil",
  sku: 0921382,
  quantity: 2
},
 {
  reference: "A0003",
  item: "sticker",
  sendTo: "USA",
  sku: 0921380,
  quantity: 2
}];

let result = arr.reduce((previousValue, currentValue) => {
     if (exists = previousValue.find(i => i.reference === currentValue.reference)) {
         exists.item  = ', '   currentValue.item;
         exists.sku  = ', '   currentValue.sku;
         exists.quantity  = ', '   currentValue.quantity;
     } else {
         previousValue.push(currentValue);
     }
     return previousValue;
}, []);

console.log(result);

CodePudding user response：

Assuming the elements are already sorted:

const data = [{
  reference: "A0002",
  sendTo: "USA",
  item: "sticker",
  sku: 0921380,
  quantity: 1
},
{
  reference: "A0002",
  sendTo: "USA",
  item: "toy",
  sku: 0921381,
  quantity: 2
}, {
  reference: "A0002",
  item: "pencil",
  sku: 0921382,
  quantity: 2
},
 {
  reference: "A0003",
  item: "sticker",
  sendTo: "USA",
  sku: 0921380,
  quantity: 2
}]

const table = document.getElementById('myTable')
let sameCount = 0
for (let i = 0; i < data.length; i  ) {
    const row = table.insertRow()
    let cell
    if (sameCount == 0) {
        for (let j = i   1; j < data.length && data[j].reference == data[i].reference; j  )
            sameCount  
        cell = row.insertCell()
        cell.innerHTML = data[i].reference
        cell.setAttribute('rowspan', sameCount   1)
        cell = row.insertCell()
        cell.innerHTML = data[i].sendTo
        cell.setAttribute('rowspan', sameCount   1)
    } else {
        sameCount--
    }
    cell = row.insertCell()
    cell.innerHTML = data[i].item
    cell = row.insertCell()
    cell.innerHTML = data[i].sku
    cell = row.insertCell()
    cell.innerHTML = data[i].quantity
}

table, th, td {
  border: 1px solid;
}

<table id="myTable">
    <tr>
        <th>reference</th>
        <th>sendTo</th>
        <th>item</th>
        <th>sku</th>
        <th>quantity</th>
    <tr>
</table>