JavaScript How to group array items based on multiple keys in Javascript / Jquery group array items javascript,group array items by pair ruby,

I have an Javascript array as below

var data = [{
            "Ticket_id": "239248",
            "Order_Issue": "SAP",
            "Region": "EU",
            "Line_No": "10",
            "Line_Issue": "Qty not available",
            "Serial_Number": "72CEP92"
        },
        {
            "Ticket_id": "239248",
            "Order_Issue": "SAP",
            "Region": "EU",
            "Line_No": "20",
            "Line_Issue": "contact info missing",
            "Serial_Number": "2198IE3"
        }];

I want to group my array by multiple keys. The result should look as below :

var data = [{
            "Ticket_id": "239248",
            "Order_Issue": "SAP",
            "Region": "EU",
            "Lines" : [ 
            {"Line_No": "10",
            "Line_Issue": "Qty not available",
            "Serial_Number": "72CEP92"},
            {"Line_No": "20",
            "Line_Issue": "contact info missing",
            "Serial_Number": "2198IE3"}]
        }];

So basically, I will group by Ticket_id, Order_Issue and Region. And I will add Items subarray where I will store all the Line_No, Line_Issue and Serial_Number.

I succeeded to group only by one key let's say by Ticket_id as the below example. When I add another key to my object obj[item."Order_Issue] = obj[item."Order_Issue] || [];, the group by will be done only on that key and ignore the previous key. Any suggestions please what am I doing wrong and how to get the exact format I want. Thank you.

var data = [{
            "Ticket_id": "239248",
            "Order_Issue": "SAP",
            "Region": "EU",
            "Line_No": "10",
            "Line_Issue": "Qty not available",
            "Serial_Number": "72CEP92"
        },
        {
            "Ticket_id": "239248",
            "Order_Issue": "SAP",
            "Region": "EU",
            "Line_No": "20",
            "Line_Issue": "contact info missing",
            "Serial_Number": "2198IE3"
        },
        {
            "Ticket_id": "239267",
            "Order_Issue": "Online Payment",
            "Region": "EU",
            "Line_No": "10",
            "Line_Issue": "card expired",
            "Serial_Number": "21BBF03"
        }];
        
 var group_Line_No = data.reduce(function (obj, item) {
    obj[item.Ticket_id] = obj[item.Ticket_id] || [];
    obj[item.Ticket_id].push(item.Line_No);
    return obj;
}, {});

console.log(group_Line_No);

var groups = Object.keys(group_Line_No).map(function (key) {
    return {Ticket_id: key, Line_No: group_Line_No[key]};
});

console.log(groups);
Answer:1

Use a similar method, but combine all the key properties into the keys of the intermedia result object.

var data = [{
    "Ticket_id": "239248",
    "Order_Issue": "SAP",
    "Region": "EU",
    "Line_No": "10",
    "Line_Issue": "Qty not available",
    "Serial_Number": "72CEP92"
  },
  {
    "Ticket_id": "239248",
    "Order_Issue": "SAP",
    "Region": "EU",
    "Line_No": "20",
    "Line_Issue": "contact info missing",
    "Serial_Number": "2198IE3"
  },
  {
    "Ticket_id": "239267",
    "Order_Issue": "Online Payment",
    "Region": "EU",
    "Line_No": "10",
    "Line_Issue": "card expired",
    "Serial_Number": "21BBF03"
  }
];

var group_Line_No = data.reduce(function(obj, item) {
  let key = `${item.Ticket_id}.${item.Order_Issue}.${item.Region}`;
  obj[key] = obj[key] || {
    Ticket_id: item.Ticket_id,
    Order_Issue: item.Order_Issue,
    Region: item.Region,
    Lines: []
  };
  obj[key].Lines.push({
    Line_No: item.Line_No,
    Line_Issue: item.Line_Issue,
    Serial_Number: item.Serial_Number
  });
  return obj;
}, {});

var groups = Object.values(group_Line_No);

console.log(groups);
Answer:2

If you want a dynamic solution for any mix of keys you could use reduce method and inside use for...of loop and check if the current property is key to group by or should be added to new object in Lines array.

var data = [{"Ticket_id":"239248","Order_Issue":"SAP","Region":"EU","Line_No":"10","Line_Issue":"Qty not available","Serial_Number":"72CEP92"},{"Ticket_id":"239248","Order_Issue":"SAP","Region":"EU","Line_No":"20","Line_Issue":"contact info missing","Serial_Number":"2198IE3"},{"Ticket_id":"239267","Order_Issue":"Online Payment","Region":"EU","Line_No":"10","Line_Issue":"card expired","Serial_Number":"21BBF03"}]

const groupBy = keys => data.reduce((r, e) => {
  const key = keys.map(k => e[k]).join('|');
  const obj = {}

  for (let [k, v] of Object.entries(e)) {
    if (!r[key]) r[key] = {Lines: []}

    if (keys.includes(k)) {
      r[key][k] = v
    } else {
      obj[k] = v
    }
  }

  r[key].Lines.push(obj)
  return r;
}, {});

const result = groupBy(['Ticket_id', 'Order_Issue', 'Region'])
console.log(Object.values(result))
Answer:3

I'm new user of ReactJS and I bumped in a point. I'm creating a generic map component, it works perfectly. However, only can render one component by page. I would like to instead use getElementById, I ...

I'm new user of ReactJS and I bumped in a point. I'm creating a generic map component, it works perfectly. However, only can render one component by page. I would like to instead use getElementById, I ...

I have a code for table and search text : <div class="table-responsive"> Search Data : <input type="text" class="txtSearch" id="search_field"> <div class="tableFixHead"> ...

I have a code for table and search text : <div class="table-responsive"> Search Data : <input type="text" class="txtSearch" id="search_field"> <div class="tableFixHead"> ...

  1. change content inside div jquery
  2. change content inside iframe
  3. change content inside div css
  4. javascript change content inside iframe
  5. javascript change content inside div
  6. javascript change content inside span

I have some problems with css manipulation with jQuery. Here is what I need to do. I have these three picture. Each are a representation of a person. When we click on one of those, this div appears: ...

I have some problems with css manipulation with jQuery. Here is what I need to do. I have these three picture. Each are a representation of a person. When we click on one of those, this div appears: ...

I am working on a javascript problem for fun that is supposed to take a string and return nested arrays that contain one array for every character that repeats. The groups should have the following ...

I am working on a javascript problem for fun that is supposed to take a string and return nested arrays that contain one array for every character that repeats. The groups should have the following ...

  1. finding last index of string in java
  2. finding last index of a string in oracle