Javascript 将数据按摩到新数组中

Question

编辑

所以我想我应该更深入地研究一下。我目前正在使用 HighCharts JS。对于要在 highcharts 中显示的数据，我必须具有如下最终数据:

[
  {
    name: 'Performing',
    data: [1941404, 1028717, 697370, 0, 0, 0]
  },
  {
    name: 'Non performing',
    data: [0, 0, 0, 1759908, 890857, 280235]
  },
  {
    name: 'Substandard',
    data: [0, 0, 863825, 0, 0, 0]
  },
  {
    name: 'Written-off',
    data: [0, 0, 0, 0, 0, 77146]
  }
]

“数据”是填充图表 x 轴的 6 个对象的数组。

但是，我有以下数据是通过 MongoDb 提供的

[
  {
    "_id": {
      "data": "90 - 180",
      "status": "Non Performing"
    },
    "value": 1759908
  },
  {
    "_id": {
      "data": "360",
      "status": "Written-off"
    },
    "value": 77146
  },
  {
    "_id": {
      "data": "360",
      "status": "Non Performing"
    },
    "value": 280235
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Substandard"
    },
    "value": 863825
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Performing"
    },
    "value": 697370
  },
  {
    "_id": {
      "data": "180 - 360",
      "status": "Non Performing"
    },
    "value": 890857
  },
  {
    "_id": {
      "data": "0 - 30",
      "status": "Performing"
    },
    "value": 1028717
  },
  {
    "_id": {
      "data": "0",
      "status": "Performing"
    },
    "value": 1941404
  }
]

我需要过滤后面的代码，让它像前面的代码一样结束。非常重要的是，在数据数组中，我们最终得到 6 个对象，以确保我们填充了 Highcharts 的整个 xAxis，因此我们看到很多零，没有提供数据。

我真的希望这能解决问题。感谢所有提供帮助的人。对于偏移量如此含糊，我深表歉意。

快速说明数据数组的顺序如下:0, 0-30, 30-90, 90-180, 180-360, 360

Answer 1

使用.reduce 和.map 方法到达那里。您可以使用 .reduce 方法加入数据，以实现您想要的效果，然后使用 .map 方法将其整形回数组。

见下文:

const data = [
  {
    "_id": { "data": "90 - 180", "status": "Non Performing" }, "value": 1759908
  },
  {
    "_id": { "data": "360", "status": "Written-off" }, "value": 77146
  },
  {
    "_id": { "data": "360", "status": "Non Performing" }, "value": 280235
  },
  {
    "_id": { "data": "30 - 90", "status": "Substandard" }, "value": 863825
  },
  {
    "_id": { "data": "30 - 90", "status": "Performing" }, "value": 697370
  },
  {
    "_id": { "data": "180 - 360", "status": "Non Performing" }, "value": 890857
  },
  {
    "_id": { "data": "0 - 30", "status": "Performing" }, "value": 1028717
  },
  {
    "_id": { "data": "0", "status": "Performing" }, "value": 1941404
  }
]

const reducedMap = data.reduce((reducedMap, entry) => {
    if(!reducedMap[entry._id.status]) reducedMap[entry._id.status] = [];
    reducedMap[entry._id.status].push(entry.value);
    return reducedMap;
}, {});

const reducedArray = Object.keys(reducedMap).map( key => ({
    name: key,
    data: reducedMap[key]
}))

---

编辑

因此，在阅读了您的评论和其他答案后，我想出了这个解决方案，它正好满足了您的需要(请阅读其中的评论 block 以了解):

// Define How the data is structured
const orderIdx = ["0", "0 - 30", "30 - 90", "90 - 180", "180 - 360", "360"];
const allStatuses = ["Performing", "Non Performing", "Substandard" , "Written-off"];

// Construct the mapping
const mappedIdx = orderIdx.reduce((m, key)=> { return { ...m, [key]: 0 } }, {}) 
    // mappedIdx = { "0": 0, "0-30": 0, "30-90": 0, "90-180": 0, "180-360": 0, "360": 0 }
const mappedInput = allStatuses.reduce((m, name) => { 
    return {...m, [name]: Object.assign({},mappedIdx) };
}, {})
    // mappedInput = { 
    //  "Performing": { "0": 0, "0-30": 0, "30-90": 0, "90-180": 0, "180-360": 0, "360": 0 }, 
    //  "Non Performing": { "0": 0, "0-30": 0, "30-90": 0, "90-180": 0, "180-360": 0, "360": 0 }, 
    //  "Substandard" : { "0": 0, "0-30": 0, "30-90": 0, "90-180": 0, "180-360": 0, "360": 0 }, 
    //  "Written-off": { "0": 0, "0-30": 0, "30-90": 0, "90-180": 0, "180-360": 0, "360": 0 }, 
    // }

// Loop on data
data.forEach( row => {
    mappedInput[row._id.status][row._id.data] = row.value
})

const reducedArray = Object.keys(mappedInput).map( key => ({
    name: key,
    data: Object.keys(mappedInput[key]).map( dataKey => mappedInput[key][dataKey])
}))

// reducedArray = [
//   {
//     name: 'Performing',
//     data: [1941404, 1028717, 697370, 0, 0, 0]
//   },
//   {
//     name: 'Non performing',
//     data: [0, 0, 0, 1759908, 890857, 280235]
//   },
//   {
//     name: 'Substandard',
//     data: [0, 0, 863825, 0, 0, 0]
//   },
//   {
//     name: 'Written-off',
//     data: [0, 0, 0, 0, 0, 77146]
//   }
// ]

您还可以将其简化为一个短函数:

function summarizeData(data, orderIdx, allStatuses){
    const mappedIdx = orderIdx.reduce((m, key)=> { return { ...m, [key]: 0 } }, {}) 
    const mappedInput = allStatuses.reduce((m, name) => { 
        return {...m, [name]: Object.assign({},mappedIdx) };
    }, {})

    data.forEach( row => {
        mappedInput[row._id.status][row._id.data] = row.value
    })

    return Object.keys(mappedInput).map( key => ({
        name: key,
        data: Object.keys(mappedInput[key]).map( dataKey => mappedInput[key][dataKey])
    }))
}
summarizeData(data, ["0", "0 - 30", "30 - 90", "90 - 180", "180 - 360", "360"], ["Performing", "Non Performing", "Substandard" , "Written-off"])

请注意，您需要对 orderIdx 和 allStatuses 进行参数化，因为仅凭目测还不清楚它们应该如何设置。此外，请确保设置一个流程来验证这些实际上是它们可以采用的唯一值。