通过对象的 JavaScript 值求和

Question

我正在从 API 返回 JSON 数据。然后我使用 map 创建我自己的对象。

数据有多个对象。这是一个例子:

{
  "data": {
    "job": [
      {
        "jobNumber": "1",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "10.00" }
            },
            {
              "total": { "amountString": "10.00" }
            }
          ]
        }
      },
      {
        "jobNumber": "2",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "20.00" }
            },
            {
              "total": { "amountString": "20.00" }
            }
          ]
        }
      },
      {
        "jobNumber": "3",
        "jobTasks": {
          "jobTask": [
            {
              "total": { "amountString": "30.00" }
            },
            {
              "total": { "amountString": "30.00" }
            }
          ]
        }
      }
    ]
  }
}

从返回的示例开始，我想要以下内容:

jobNumber:1:共 20 个。 jobNumber: 2: 共40个。 jobNumber: 3: 总计 60.

这是我使用的代码:

var array = response.data.map(function(item, array) {

   var sumTaskTotal = item.jobTasks.reduce(function(sumTaskTotal, item, index) {
       if (item !== null && item.total !== null) {
          sumTaskTotal += item.total.amountString;
          return sumTaskTotal;
       }
    }, 0);

    array = response.data.map(item => ({
      jobNumber: item.jobNumber,
      sumTaskTotal: sumTaskTotal,
    }));
}

但是我使用的总和只是不断求和，所以我最终得到:

jobNumber: 1: Total 120. jobNumber: 120: Total 120. jobNumber: 3: Total 120.

我试过 for 循环，但似乎没有任何效果。

Answer 1

实际上不确定您是如何获得jobNumber: 1: Total 120. jobNumber: 120: Total 120. jobNumber: 3: Total 120.。我试过你的代码，当你记录数组时，你只会得到一个 array with 3 undefined items;代码中 map 中的每次迭代都不会返回任何内容，这就是数组包含 3 个未定义项的原因。

此外，data 和 jobTasks 都是对象。您应该在 job 和 jobTask 属性上使用 map 或 reduce。

至于总和，amountString 是一个string(很明显)，您应该先将其转换为数字。否则，第一次迭代的结果将是 010.00，因为您将 string 连接到 number。它不会添加 0 和 10.00。

外部 map 中的 array = response.data.map... 部分将再次遍历所有作业。 map 中的每次迭代都期望返回一个项目。如果您不返回任何内容，undefined 将是该数组的值。因此，您可以这样做，而不是再次映射数组:

return {
  jobNumber: item.jobNumber,
  sumTaskTotal,
};

这将导致包含 3 个对象的数组:

[{
  jobNumber: '1',
  sumTaskTotal: 20,
}, {
  jobNumber: '2',
  sumTaskTotal: 40,
}, {
  jobNumber: '3',
  sumTaskTotal: 60,
}]

但是，您可以改为执行 nested reduce:

const formatted = response.data.job.reduce((prevString, currentJob) => {
  const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
    return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);

  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

const response = {
  "data": {
    "job": [{
      "jobNumber": "1",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "10.00"
          }
        }, {
          "total": {
            "amountString": "10.00"
          }
        }]
      }
    }, {
      "jobNumber": "2",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "20.00"
          }
        }, {
          "total": {
            "amountString": "20.00"
          }
        }]
      }
    }, {
      "jobNumber": "3",
      "jobTasks": {
        "jobTask": [{
          "total": {
            "amountString": "30.00"
          }
        }, {
          "total": {
            "amountString": "30.00"
          }
        }]
      }
    }]
  }
};

const formatted = response.data.job.reduce((prevString, currentJob) => {
	const total = currentJob.jobTasks.jobTask.reduce((prevTotal, currentJobTask) => {
  	return prevTotal + Number(currentJobTask.total.amountString);
  }, 0);
  
  return `${prevString}jobNumber: ${currentJob.jobNumber}: Total ${total}. `;
}, '');

console.log(formatted.trim());