How to create unique array of object from API response in JavaScript?

Question

I have below API response need to construct unique array of object based on ID.

const response = [{id: "ABC", value: 120, day: "MON"},{id: "ABC", value: 120, day: "TUE"},{id: "ABC", value: 120, day: "WED"},{id: "ABC", value: 120, day: "THU"},{id: "ABC", value: 120, day: "FRI"},
{id: "XYZ", value: 120, day: "TUE"},{id: "XYZ", value: 140, day: "WED"},{id: "XYZ", value: 160, day: "FRI"},{id: "SUV", value: 120, day: "MON"},{id: "SUV", value: 140, day: "TUE"}];

I want unique array of object like below

obj = [{ItemID: "ABC", MON: 120, TUE: 120, WED: 120, THU: 120, FRI: 120 }, {ItemID: "XYZ", TUE: 120, WED: 140, FRI: 160 }, {ItemID: "SUV", MON: 120, TUE: 140} ];

I tried the below method

let obj = {ItemID: ""};
let arr = [];
response.forEach(el => {
let day = el.day;
  obj.ItemID = el.id;
  obj[day] = el.value
}
)

arr.push(obj);

console.log(arr)

Using above code i am always getting below array of object. I am not able append another object when id is not matched

obj = [{ItemID: "ABC", MON: 120, TUE: 120, WED: 120, THU: 120, FRI: 120 }]

Answer 1

You can use Array.prototype.reduce to accumulate the objects in an array and Array.prototype.find to search for the existing object with the particular ItemID in the array.

If found modify the object with the new data else add a fresh new object:

 const response = [{id: "ABC", value: 120, day: "MON"},{id: "ABC", value: 120, day: "TUE"},{id: "ABC", value: 120, day: "WED"},{id: "ABC", value: 120, day: "THU"},{id: "ABC", value: 120, day: "FRI"}, {id: "XYZ", value: 120, day: "TUE"},{id: "XYZ", value: 140, day: "WED"},{id: "XYZ", value: 160, day: "FRI"},{id: "SUV", value: 120, day: "MON"},{id: "SUV", value: 140, day: "TUE"}]; const processObject = (res) => { return res.reduce((acc, o) => { let day = acc.find(d => d.ItemID === o.id); if (day) { day[o.day] = o.value; } else { acc.push({ ItemID: o.id, [o.day]: o.value }); } return acc; }, []) } console.log(processObject(response));

In your code you are always overriding the same object, you should create a new object when the ItemID has changed. if it is the same ItemID you should search for it and modify the result or create a new one and push into the final array.

Answer 2

You can make use of Array.reduce along with Object.values .

 const response = [{id: "ABC", value: 120, day: "MON"},{id: "ABC", value: 120, day: "TUE"},{id: "ABC", value: 120, day: "WED"},{id: "ABC", value: 120, day: "THU"},{id: "ABC", value: 120, day: "FRI"}, {id: "XYZ", value: 120, day: "TUE"},{id: "XYZ", value: 140, day: "WED"},{id: "XYZ", value: 160, day: "FRI"},{id: "SUV", value: 120, day: "MON"},{id: "SUV", value: 140, day: "TUE"}]; const formatResponse = (data) => { const finalRes = data.reduce((res, {id, value, day}) => { res[id] = { ItemID: id, ...res[id], [day]: value } return res; },{}); return Object.values(finalRes) } console.log(formatResponse(response))

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

Using Array.forEach also it can be achieved but then reduce makes more informative when we look at the method, that we are doing some kind of processing and accumulating the provided data based on id.

 const response = [{id: "ABC", value: 120, day: "MON"},{id: "ABC", value: 120, day: "TUE"},{id: "ABC", value: 120, day: "WED"},{id: "ABC", value: 120, day: "THU"},{id: "ABC", value: 120, day: "FRI"}, {id: "XYZ", value: 120, day: "TUE"},{id: "XYZ", value: 140, day: "WED"},{id: "XYZ", value: 160, day: "FRI"},{id: "SUV", value: 120, day: "MON"},{id: "SUV", value: 140, day: "TUE"}]; const processResponse = (data) => { const finalRes = {}; data.forEach(({id, value, day}) => { finalRes[id] = { ItemID: id, ...finalRes[id], [day]: value } }); return Object.values(finalRes) } console.log(processResponse(response));

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