如何使用jQuery将JSON数组分为2个单独的值数组？

Question

我有以下AJAX脚本从PHP文件中提取JSON数组：

// get jsonData from inc/wip-data.php
var jsonData = $.ajax({
  url: 'inc/wip-data.php',
  dataType: 'json',
});

JSON数组如下：

[
{
    "date": "2015-10",
    "clientCostsTotal": "0.00"
},
{
    "date": "2015-11",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-01",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-02",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-03",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-04",
    "clientCostsTotal": "27962.50"
},
{
    "date": "2016-05",
    "clientCostsTotal": "174060.00"
},
{
    "date": "2016-06",
    "clientCostsTotal": "309000.00"
},
{
    "date": "2016-07",
    "clientCostsTotal": "502261.50"
},
{
    "date": "2016-08",
    "clientCostsTotal": "7598.00"
},
{
    "date": "2016-12",
    "clientCostsTotal": "0.00"
}
]

我需要获取所有date值并将它们存储在一个数组中。 另外，我需要获取所有clientCostsTotal值并将它们存储在单独的数组中。 我该怎么做呢？

谢谢您的帮助。

Answer 1

不需要jQuery，使用Array.forEach()这样：

var dates = [];
var clientCosts = [];

$.ajax({
  url: 'inc/wip-data.php',
  dataType: 'json'
}).done(function(data) {
  data.forEach(function(item) {
    dates.push(item.date);
    clientCosts.push(item.clientCostsTotal);
  });
});

对于更实用的方法，您可能想尝试使用Array.reduce() ，它使您能够生成多个结果数组，同时仍仅对源数据进行一次迭代。 这是一个使用.reduce()实现的函数，它将采用您拥有的结构化数组并将这些结果整理为结果。 此函数是通用函数，适用于源中定义的任何属性名称。

 function collate(d) { return d.reduce(function(prev, cur, index) { var ret = {}; for (var prop in cur) { if (index === 0) { ret[prop] = []; } else { ret[prop] = prev[prop]; } ret[prop].push(cur[prop]); } return ret; }, {}); } var data = [{ "date": "2015-10", "clientCostsTotal": "0.00" }, { "date": "2015-11", "clientCostsTotal": "0.00" }, { "date": "2016-01", "clientCostsTotal": "0.00" }, { "date": "2016-02", "clientCostsTotal": "0.00" }, { "date": "2016-03", "clientCostsTotal": "0.00" }, { "date": "2016-04", "clientCostsTotal": "27962.50" }, { "date": "2016-05", "clientCostsTotal": "174060.00" }, { "date": "2016-06", "clientCostsTotal": "309000.00" }, { "date": "2016-07", "clientCostsTotal": "502261.50" }, { "date": "2016-08", "clientCostsTotal": "7598.00" }, { "date": "2016-12", "clientCostsTotal": "0.00" }]; var reduced = collate(data); console.log(reduced.date, reduced.clientCostsTotal); 

Answer 2

为什么不使用.map ？ 这将省去分配一个全新的数组并推送到它的麻烦？

$.ajax({
  url: 'inc/wip-data.php',
  dataType: 'json',
}).done(function(data) {
  // One for dates
  var dates = data.map(function(item) {
    return item.date;
  });

  // The other for client costs
  var clientCostTotals = data.map(function(item) {
    return item.clientCostsTotal;
  });
});

Answer 3

jQuery解决方案

// Your data will look like
var dataArrayOfJson = [{"date": "2015-10", "clientCostsTotal": "0.00"},{"date": "2015-11","clientCostsTotal": "0.00"}];

var dates = [], clientCostsTotals= [];
$(dataArrayOfJson ).each( function(i,item){ 
  dates.push(dataArrayOfJson [i].date);  // or dates.push(item.date);
  clientCostsTotals.push(dataArrayOfJson [i].clientCostsTotal); // or  clientCostsTotals.push(item.clientCostsTotal);
});

Answer 4

我一直在使用的新解决方案是map函数。 它是为函数式编程而开发的，它是拆分“树”的更好方法，并且更加易于理解。 仍在学习，但我在这里推荐此视频。 ECMA 5完全支持它。

var Array1 = 
[
{
    "date": "2015-10",
    "clientCostsTotal": "0.00"
},
{
    "date": "2015-11",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-01",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-02",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-03",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-04",
    "clientCostsTotal": "27962.50"
},
{
    "date": "2016-05",
    "clientCostsTotal": "174060.00"
},
{
    "date": "2016-06",
    "clientCostsTotal": "309000.00"
},
{
    "date": "2016-07",
    "clientCostsTotal": "502261.50"
},
{
    "date": "2016-08",
    "clientCostsTotal": "7598.00"
},
{
    "date": "2016-12",
    "clientCostsTotal": "0.00"
}];

var result = Array1.map(function(a) {
var dates = [], clientCostsTotals= [];
dates.push(a.date); 
clientCostsTotals.push(a.clientCostsTotal);
});

希望对您有所帮助！

Answer 5

我的偏好是将lodash用于涉及数组的操作。 lodash api具有一个名为map的功能 ，可以很好地满足您的要求。 这是一个例子：

var jsonArray = [
{
    "date": "2015-10",
    "clientCostsTotal": "0.00"
},
{
    "date": "2015-11",
    "clientCostsTotal": "0.00"
},
{
    "date": "2016-01",
    "clientCostsTotal": "0.00"
}];
var dateValues = _.map(jsonArray, 'date');
var clientTotalCostValues = _.map(jsonArray, 'clientCostsTotal');
console.log('dateValues = ', dateValues);
console.log('clientTotalCostValues = ', clientTotalCostValues );

输出以下内容：

dateValues =  ["2015-10", "2015-11", "2016-01"]
clientTotalCostValues =  ["0.00", "0.00", "0.00"]

您可以转到lodash api文档页面打开浏览器开发工具，然后将我的代码段粘贴到控制台中，然后按Enter键 ，以快速对其进行测试。