如何使用空值預先填充數組？

Question

我正在嘗試將我從API接收的一些數據填充到圖表中，並且為了“正常工作”，我需要確保數組中的每個對象在sum屬性下有12值（每個對應一個值）一年中的一個月）。

我從API收到的數據如下所示：

[
  {
    "sum": {
      "201901": 8,
      "201902": 16,
      "201903": 8,
      "201904": 8,
      /* This project is missing data for month 5 and 6 */
      "201907": 5,
      "201908": 2,
      "201909": 0,
      "201910": 2,
      "201911": 5,
      "201912": 8
    },
    "project": "Project Name 1"
  },
  {
    "sum": {
      "201901": 9,
      "201902": 18,
      "201903": 9,
      "201904": 9,
      "201905": 17,
      "201906": 5,
      "201907": 2,
      "201908": 4,
      /* This project is missing data for month 9, 10, 11, 12 */
    },
    "project": "Project Name 2"
  },
  {
    "sum": {
      "201901": 2,
      "201902": 2,
      "201903": 5,
      "201904": 2,
      "201905": 0,
      "201906": 10,
      "201907": 45,
      "201908": 21,
      "201909": 3,
      "201910": 2,
      "201911": 17,
      "201912": 16
    },
    "project": "Project Name 3"
  }
]

所以，正如你所看到的， project 1和project 2在幾個月內都缺少了點，但我仍然需要用空值填充它們（例如： "201905": 0 ， "201906": 0等），因為X-axis在我的圖表將永遠是12值，如果它攪亂事情了Y-axis沒有12的給定值。 所以我的問題是： 我如何填充每個對象以始終為一年中的每個月提供一個值？

到目前為止，我正在循環數據：

for (let key in this.chartData) {
    emptyArr.push({
        name: this.chartData[key].project,
        data: Object.values(this.chartData[key].sum),
    });
}

這有效地給了我一些工作：

[
  {
    "name": "Project 1",
    "data": [8, 16, 8, 8, 21, 4, 5, 2, 0, 2, 5, /*Need a "0" here*/]
  },
  {
    "name": "Project 2",
    "data": [9, 18, 9, 9, 17, 5, 2, 4, /*Need 4 more 0's here*/]
  },
  {
    "name": "Project 3",
    "data": [2, 2, 5, 2, 0, 10, 45, 21, 3, 2, 17, 16]
  }
]

Answer 1

您可以獲取空的sum對象並將值分配給新對象。

 var data = [{ sum: { 201901: 8, 201902: 16, 201903: 8, 201904: 8, 201907: 5, 201908: 2, 201909: 0, 201910: 2, 201911: 5, 201912: 8 }, project: "Project Name 1" }, { sum: { 201901: 9, 201902: 18, 201903: 9, 201904: 9, 201905: 17, 201906: 5, 201907: 2, 201908: 4 }, project: "Project Name 2" }, { sum: { 201901: 2, 201902: 2, 201903: 5, 201904: 2, 201905: 0, 201906: 10, 201907: 45, 201908: 21, 201909: 3, 201910: 2, 201911: 17, 201912: 16 }, project: "Project Name 3" }], empty = { 201901: 0, 201902: 0, 201903: 0, 201904: 0, 201905: 0, 201906: 0, 201907: 0, 201908: 0, 201909: 0, 201910: 0, 201911: 0, 201912: 0 }, empty = { 201901: 0, 201902: 0, 201903: 0, 201904: 0, 201905: 0, 201906: 0, 201907: 0, 201908: 0, 201909: 0, 201910: 0, 201911: 0, 201912: 0 }, result = data.map(({ sum, ...rest }) => ({ sum: { ...empty, ...sum }, ...rest })); console.log(result); 

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

Answer 2

如果使用所有12 keys定義對象，例如：

const normalizedSum = {
  "201901": 0,
  "201902": 0,
  "201903": 0,
  "201904": 0,
  "201905": 0,
  "201906": 0,
  "201907": 0,
  "201908": 0,
  "201909": 0,
  "201910": 0,
  "201911": 0,
  "201912": 0
};

然后，您可以在input數組上使用Array.map（） ，如下所示：

input.map(({sum, project}) => ({sum: {...normalizedSum, ...sum}, project}));

完整示例：

 const input = [{"sum":{"201901":8,"201902":16,"201903":8,"201904":8,"201907":5,"201908":2,"201909":0,"201910":2,"201911":5,"201912":8},"project":"Project Name 1"},{"sum":{"201901":9,"201902":18,"201903":9,"201904":9,"201905":17,"201906":5,"201907":2,"201908":4,},"project":"Project Name 2"},{"sum":{"201901":2,"201902":2,"201903":5,"201904":2,"201905":0,"201906":10,"201907":45,"201908":21,"201909":3,"201910":2,"201911":17,"201912":16},"project":"Project Name 3"}]; const normalizedSum = { "201901": 0, "201902": 0, "201903": 0, "201904": 0, "201905": 0, "201906": 0, "201907": 0, "201908": 0, "201909": 0, "201910": 0, "201911": 0, "201912": 0 }; let res = input.map( ({sum, project}) => ({sum: {...normalizedSum, ...sum}, project}) ); console.log(res); 

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

Answer 3

你可以做的是制作一個模板對象，它具有默認值為0所有12個月。 然后瀏覽sum項，如果它們具有匹配的日期鍵，則將其設置為sum鍵的sum ：

for (let key in chartData) {
  // template object holding 0s
  let data = { "201901": 0, "201902": 0, "201903": 0, "201904": 0, "201905": 0, "201906": 0, "201907": 0, "201908": 0, "201909": 0, "201910": 0, "201911": 0, "201912": 0 };
  // For each key that exist in the sum object populate data with that value
  for (let month in chartData[key].sum) data[month] = chartData[key].sum[month];

  emptyArr.push({
    name: chartData[key].project,
    data: Object.values(data), // Now you can do the same thing you where doing before
  });
}

這是一個完整的例子：

 let chartData = [ { "sum": { "201901": 8, "201902": 16, "201903": 8, "201904": 8, /* This project is missing data for month 5 and 6 */ "201907": 5, "201908": 2, "201909": 0, "201910": 2, "201911": 5, "201912": 8 }, "project": "Project Name 1" }, { "sum": { "201901": 9, "201902": 18, "201903": 9, "201904": 9, "201905": 17, "201906": 5, "201907": 2, "201908": 4, /* This project is missing data for month 9, 10, 11, 12 */ }, "project": "Project Name 2" }, { "sum": { "201901": 2, "201902": 2, "201903": 5, "201904": 2, "201905": 0, "201906": 10, "201907": 45, "201908": 21, "201909": 3, "201910": 2, "201911": 17, "201912": 16 }, "project": "Project Name 3" } ]; let emptyArr = [] for (let key in chartData) { let data = { "201901": 0, "201902": 0, "201903": 0, "201904": 0, "201905": 0, "201906": 0, "201907": 0, "201908": 0, "201909": 0, "201910": 0, "201911": 0, "201912": 0 }; for (let month in chartData[key].sum) data[month] = chartData[key].sum[month]; emptyArr.push({ name: chartData[key].project, data: Object.values(data), }); } console.log(emptyArr);