Manipulate JavaScript Array for displaying in HTML Table

Question

I am getting results from my MySQL in an array like this:

    [ RowDataPacket {
        Shipper_Name: 'SONA CEREAL PRODUCTS PRIVATE LIMITED',
        Job_ID: 6,
        ShipperInvoiceNo: '12',
        Packing: '4X10Kgs',
        TotalBags: 4000,
        receivedbags: null,
        Diff: null },
      RowDataPacket {
        Shipper_Name: 'AGROW ALLIED VENTURES P LTD',
        Job_ID: 7,
        ShipperInvoiceNo: '0129-20',
        Packing: '1X30Kgs',
        TotalBags: 4800,
        receivedbags: 3670,
        Diff: -1130 },
      RowDataPacket {
        Shipper_Name: 'ATLANTIC CROP SCIENCE P LTD',
        Job_ID: 8,
        ShipperInvoiceNo: '0334/20-21',
        Packing: '8X5Kgs',
        TotalBags: 8758,
        receivedbags: 8758,
        Diff: 0 },
      RowDataPacket {
        Shipper_Name: 'ATLANTIC CROP SCIENCE P LTD',
        Job_ID: 8,
        ShipperInvoiceNo: '0334/20-21',
        Packing: '1X40Kgs',
        TotalBags: 1800,
        receivedbags: 1800,
        Diff: 0 },
      RowDataPacket {
        Shipper_Name: 'ATLANTIC CROP SCIENCE P LTD',
        Job_ID: 8,
        ShipperInvoiceNo: '0334/20-21',
        Packing: '4X10Kgs',
        TotalBags: 4130,
        receivedbags: 530,
        Diff: -3600 } ]

Now I want to convert this JSON data or array to the array below as I want to fill a html table with this data.

    [{"Shipper_Name":"SONA CEREAL PRODUCTS PRIVATE LIMITED"},{"Job_ID":"6","ShipperInvoiceNo": "12","Packing": "4X10Kgs","TotalBags": "4000","receivedbags": "null","Diff": "null"},{"Shipper_Name": "AGROW ALLIED VENTURES P LTD"},{"Job_ID": "7","ShipperInvoiceNo": "0129-20","Packing": "1X30Kgs","TotalBags": "4800","receivedbags": "3670","Diff": "-1130" },{"Shipper_Name": "ATLANTIC CROP SCIENCE P LTD"},{"Job_ID": "8","ShipperInvoiceNo": "0334/20-21","Packing": "8X5Kgs","TotalBags": "8758","receivedbags": "8758","Diff": "0"},{"Job_ID": "8","ShipperInvoiceNo": "0334/20-21","Packing": "1X40Kgs","TotalBags": "1800","receivedbags": "1800","Diff": "0"},{"Job_ID": "8","ShipperInvoiceNo": "0334/20-21","Packing": "4X10Kgs","TotalBags": "4130","receivedbags": "530", "Diff": "-3600" }]

Could you double-check and confirm whether the result array format is the one you posted? I would expect something like [{ RowDataPacket: { ... } }, { RowDataPacket: { ... } }, ...] rather than [RowDataPacket { ... }, RowDataPacket { ... }, ...]. — secan
– secan, Commented Dec 3, 2020 at 9:38

slacker · Accepted Answer · 2020-12-03 09:34:28Z

1

Assuming you have setup the input as

let input = [{ Shipper_Name: ... }, {...}, ...];

Then the following code would do the trick

let output = [];
let shipperName = null;
for (let ii = 0; ii < input.length; ii++) {
  let val = input[ii];
  if (val["Shipper_Name"] !== shipperName) {
    shipperName = val["Shipper_Name"];
    output.push({Shipper_Name: shipperName});
  }
  let copy = JSON.parse(JSON.stringify(val));
  delete copy["Shipper_Name"];
  output.push(copy);
}

console.log(output);

answered Dec 3, 2020 at 9:34

slacker

5742 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Manipulate JavaScript Array for displaying in HTML Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related