时间戳

首页 > 解决方案 > 如何从 JavaScript 中的 API 响应创建唯一的对象数组？

javascript - 如何从 JavaScript 中的 API 响应创建唯一的对象数组？

问题描述

我有以下 API 响应需要基于 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"}];

我想要像下面这样的唯一对象数组

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} ];

我尝试了以下方法

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)

使用上面的代码，我总是低于对象数组。当 id 不匹配时，我无法附加另一个对象

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

标签： javascript

解决方案

您可以使用Array.reducewith 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;
}

使用Array.forEach它也可以实现，但是reduce当我们查看该方法时会提供更多信息，我们正在根据 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;
}

推荐阅读