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()实现的函数，它将使您拥有任何数组结构，并将这些结果整理成结果。此函数是通用的，适用于源中定义的任何属性名称。

＆＃13;

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);

＆＃13;

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功能。它是为函数式编程而开发的，是一种更好的方法来分割＆＃34;树＆＃34;，更容易理解。还在学习，但我推荐这段视频here。它得到了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 has a function called 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 docs page打开浏览器开发工具并将我的代码段粘贴到控制台并按Enter键，自行快速测试。

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

5 个答案: