Group array objects with same key in javascript is not working

Question

I have the following array of objects.

let arr = [
 {
  "alerts": {
    "bp": {
      "diaDiff": -20,
      "Notes": null,
      "resolveStatus": "0",
      "sysDiff": 10
    },
    "threshold": {
      "diaHigh": "110",
      "diaLow": "60",
      "sysHigh": "150",
      "sysLow": "90"
    },
    "thresholdBpUnit": "mmHg"
  },
  "measurementDate": 1593934933000,
  "actualUserID ": "11111"
},
{
  "alerts": {
    "bp": {
      "diaDiff": -20,
      "Notes": null,
      "resolveStatus": "0",
      "sysDiff": 10
    },
    "threshold": {
      "diaHigh": "110",
      "diaLow": "60",
      "sysHigh": "150",
      "sysLow": "90"
    },
    "thresholdBpUnit": "mmHg"
  },
  "measurementDate": 1593934933000,
  "actualUserID ": "2222"
},
{
  "alerts": {
    "bp": {
      "diaDiff": 80,
      "Notes": null,
      "resolveStatus": "0",
      "sysDiff": 20
    },
    "threshold": {
      "diaHigh": "120",
      "diaLow": "60",
      "sysHigh": "140",
      "sysLow": "90"
    },
    "thresholdBpUnit": "mmHg"
  },
  "measurementDate": 6593934956000,
  "actualUserID ": "11111"
},
{
  "alerts": {
    "bp": {
      "diaDiff": 400,
      "Notes": null,
      "resolveStatus": "0",
      "sysDiff": 10
    },
    "threshold": {
      "diaHigh": "170",
      "diaLow": "60",
      "sysHigh": "190",
      "sysLow": "90"
    },
    "thresholdBpUnit": "mmHg"
  },
  "measurementDate": 1593934944000,
  "actualUserID ": "2222"
},
{
      "alerts": {
        "bp": {
          "diaDiff": 300,
          "Notes": null,
          "resolveStatus": "0",
          "sysDiff": 10
        },
        "threshold": {
          "diaHigh": "570",
          "diaLow": "60",
          "sysHigh": "190",
          "sysLow": "90"
        },
        "thresholdBpUnit": "mmHg"
      },
      "measurementDate": 8593934989000,
      "actualUserID ": "6666"
    }
    ];

I need to merge array object having same userID key and is expecting the following output.

let response = {
  "success": true,
  "data": {
      "patient": [
         {
           "userID": "11111", // I need userID not actualUserID 
           "bpAlertData": [
              {
                alerts: { // object },
                measurementDate: 1593934933000
              },
              {
                alerts: { // object },
                measurementDate: 6593934956000
              }
            ]
         },
         {
           "userID": "22222",
           "bpAlertData": [
              {
                alerts: { // object },
                measurementDate: 1593934944000
              },
              {
                alerts: { // object },
                measurementDate: 1593934933000
              }
            ]
         }
       ]
  },
};

I tried the following but stuck with this.

arr.forEach((item) => {
  let filteredData = response.data.patient.filter(patient => patient.userID === item.actualUserID);
  if(filteredData.length) {
       const existingIndex = response.data.patient.indexOf(filteredData[0]);
       response.data.patient[existingIndex].bpAlertData = response.data.patient[existingIndex].bpAlertData.concat(item);
  } else {
    response.data.patient.push(item);
  }
});

console.log(response.data.patient);

Instead of actualUserID, I am expecting userID in the response. Also how can we push these data into bpAlertData. So can somebody help me with this, as I am stuck with this for a long time. Any help would be really appreciated.

Nina Scholz · Accepted Answer · 2020-08-27 14:31:36Z

1

You could group with id and get an array of patients.

const
    data = [{ alerts: { bp: { diaDiff: -20, Notes: null, resolveStatus: "0", sysDiff: 10 }, threshold: { diaHigh: "110", diaLow: "60", sysHigh: "150", sysLow: "90" }, thresholdBpUnit: "mmHg" }, measurementDate: 1593934933000, actualUserID: "11111" }, { alerts: { bp: { diaDiff: -20, Notes: null, resolveStatus: "0", sysDiff: 10 }, threshold: { diaHigh: "110", diaLow: "60", sysHigh: "150", sysLow: "90" }, thresholdBpUnit: "mmHg" }, measurementDate: 1593934933000, actualUserID: "2222" }, { alerts: { bp: { diaDiff: 80, Notes: null, resolveStatus: "0", sysDiff: 20 }, threshold: { diaHigh: "120", diaLow: "60", sysHigh: "140", sysLow: "90" }, thresholdBpUnit: "mmHg" }, measurementDate: 6593934956000, actualUserID: "11111" }, { alerts: { bp: { diaDiff: 400, Notes: null, resolveStatus: "0", sysDiff: 10 }, threshold: { diaHigh: "170", diaLow: "60", sysHigh: "190", sysLow: "90" }, thresholdBpUnit: "mmHg" }, measurementDate: 1593934944000, actualUserID: "2222" }, { alerts: { bp: { diaDiff: 300, Notes: null, resolveStatus: "0", sysDiff: 10 }, threshold: { diaHigh: "570", diaLow: "60", sysHigh: "190", sysLow: "90" }, thresholdBpUnit: "mmHg" }, measurementDate: 8593934989000, actualUserID: "6666" }],
    patient = Object.values(data.reduce((r, { actualUserID: userID, ...o }) => {
        if (!r[userID]) r[userID] = { userID, bpAlertData: [] };
        r[userID].bpAlertData.push(o);
        return r;
    }, [])),
    response = { success: true, data: { patient } };

console.log(response);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Aug 27, 2020 at 14:31

answered Aug 27, 2020 at 14:23

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

3 Comments

Vishnu Over a year ago

I am not expecting actualUserID in the result. So how can we make it better?

Vishnu Over a year ago

Can you please let me know the purpose of actualUserID: userID ?

Nina Scholz Over a year ago

it is a renaming of a destructured property: Assigning to new variable names

Ele · Accepted Answer · 2020-08-27 14:28:06Z

You can use the function Array.prototype.reduce for grouping and the function Object.values to extract the grouped objects by userID.

let arr = [ {  "alerts": {    "bp": {      "diaDiff": -20,      "Notes": null,      "resolveStatus": "0",      "sysDiff": 10    },    "threshold": {      "diaHigh": "110",      "diaLow": "60",      "sysHigh": "150",      "sysLow": "90"    },    "thresholdBpUnit": "mmHg"  },  "measurementDate": 1593934933000,  "actualUserID": "11111"},{  "alerts": {    "bp": {      "diaDiff": -20,      "Notes": null,      "resolveStatus": "0",      "sysDiff": 10    },    "threshold": {      "diaHigh": "110",      "diaLow": "60",      "sysHigh": "150",      "sysLow": "90"    },    "thresholdBpUnit": "mmHg"  },  "measurementDate": 1593934933000,  "actualUserID": "2222"},{  "alerts": {    "bp": {      "diaDiff": 80,      "Notes": null,      "resolveStatus": "0",      "sysDiff": 20    },    "threshold": {      "diaHigh": "120",      "diaLow": "60",      "sysHigh": "140",      "sysLow": "90"    },    "thresholdBpUnit": "mmHg"  },  "measurementDate": 6593934956000,  "actualUserID": "11111"},{  "alerts": {    "bp": {      "diaDiff": 400,      "Notes": null,      "resolveStatus": "0",      "sysDiff": 10    },    "threshold": {      "diaHigh": "170",      "diaLow": "60",      "sysHigh": "190",      "sysLow": "90"    },    "thresholdBpUnit": "mmHg"  },  "measurementDate": 1593934944000,  "actualUserID": "2222"},{      "alerts": {        "bp": {          "diaDiff": 300,          "Notes": null,          "resolveStatus": "0",          "sysDiff": 10        },        "threshold": {          "diaHigh": "570",          "diaLow": "60",          "sysHigh": "190",          "sysLow": "90"        },        "thresholdBpUnit": "mmHg"      },      "measurementDate": 8593934989000,      "actualUserID": "6666"    }    ],        
    obj = { "success": true, "data": {"patient":  Object.values(arr.reduce((a, {alerts, measurementDate, actualUserID: userID}) => {
      (a[userID] || (a[userID] = {bpAlertData: [], userID})).bpAlertData.push({alerts, measurementDate});
      return a;
    }, {}))}};

console.log(obj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Can you please let me know why we used actualUserID: userID inside reduce method? I didnt get the point
@Vishnu this is called a destructuring assignment, I used that way because a wanted to create the objects with the desired property name.

hgb123 · Accepted Answer · 2020-08-27 14:28:51Z

1

Approach

You could group element by userId and then manipulate through that grouped

const userIdDataMapping = arr.reduce((acc, { actualUserID, ...el }) => {
  if (acc[actualUserID] !== undefined) {
    acc[actualUserID].push(el)
  } else {
    acc[actualUserID] = [el]
  }
  return acc
}, {})

const res = Object.entries(userIdDataMapping).map(([userId, bpAlertData]) => ({
  userId,
  bpAlertData,
}))

Note

{ actualUserID, ...el } to exclude actualUserId from element
[userId, bpAlertData] destructing assignment

Full code

let arr = [
  {
    alerts: {
      bp: {
        diaDiff: -20,
        Notes: null,
        resolveStatus: "0",
        sysDiff: 10,
      },
      threshold: {
        diaHigh: "110",
        diaLow: "60",
        sysHigh: "150",
        sysLow: "90",
      },
      thresholdBpUnit: "mmHg",
    },
    measurementDate: 1593934933000,
    actualUserID: "11111",
  },
  {
    alerts: {
      bp: {
        diaDiff: -20,
        Notes: null,
        resolveStatus: "0",
        sysDiff: 10,
      },
      threshold: {
        diaHigh: "110",
        diaLow: "60",
        sysHigh: "150",
        sysLow: "90",
      },
      thresholdBpUnit: "mmHg",
    },
    measurementDate: 1593934933000,
    actualUserID: "2222",
  },
  {
    alerts: {
      bp: {
        diaDiff: 80,
        Notes: null,
        resolveStatus: "0",
        sysDiff: 20,
      },
      threshold: {
        diaHigh: "120",
        diaLow: "60",
        sysHigh: "140",
        sysLow: "90",
      },
      thresholdBpUnit: "mmHg",
    },
    measurementDate: 6593934956000,
    actualUserID: "11111",
  },
  {
    alerts: {
      bp: {
        diaDiff: 400,
        Notes: null,
        resolveStatus: "0",
        sysDiff: 10,
      },
      threshold: {
        diaHigh: "170",
        diaLow: "60",
        sysHigh: "190",
        sysLow: "90",
      },
      thresholdBpUnit: "mmHg",
    },
    measurementDate: 1593934944000,
    actualUserID: "2222",
  },
  {
    alerts: {
      bp: {
        diaDiff: 300,
        Notes: null,
        resolveStatus: "0",
        sysDiff: 10,
      },
      threshold: {
        diaHigh: "570",
        diaLow: "60",
        sysHigh: "190",
        sysLow: "90",
      },
      thresholdBpUnit: "mmHg",
    },
    measurementDate: 8593934989000,
    actualUserID: "6666",
  },
]

const userIdDataMapping = arr.reduce((acc, { actualUserID, ...el }) => {
  if (acc[actualUserID] !== undefined) {
    acc[actualUserID].push(el)
  } else {
    acc[actualUserID] = [el]
  }
  return acc
}, {})

const res = Object.entries(userIdDataMapping).map(([userId, bpAlertData]) => ({
  userId,
  bpAlertData,
}))

console.log(res)

Reference

Object.entries()

Destructing assignment

Spread syntax (...)

edited Aug 27, 2020 at 14:28

answered Aug 27, 2020 at 14:23

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

4 Comments

Vishnu Over a year ago

Could you please explain the else portion? acc[actualUserID] = [el] I didnt get the point regarding []

hgb123 Over a year ago

@Vishnu it is initializing an array with one element, here is el

Vishnu Over a year ago

Can you give some reference on using this? Still i am confused regarding the sqaure bracket notation :)

hgb123 Over a year ago

@Vishnu: it is just array developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Group array objects with same key in javascript is not working

3 Answers 3

3 Comments

2 Comments

Approach

Note

Full code

Reference

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Approach

Note

Full code

Reference

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related