根据键

时间:2016-09-21 06:45:18

标签: javascript jquery

我有一个JavaScript数组,我使用jQuery在表中显示值

for (var i = 0; i < data.MyArray.length; i++) {    
  $('#my-table').append('<tr><td>' + data.MyArray[i].DisplayGroup + '</td><td>' + data.MyArray[i].Value + '%<td></tr>');
}

我想&#34; group&#34;在显示值

之前基于DisplayGroup的值

所以如果我的数组包含

DisplayGroup: ABC Value: 5
DisplayGroup: DEF Value: 3
DisplayGroup: ABC Value: 6
DisplayGroup: GHI Value: 2

我想总计重复的DisplayGroup条目(在此示例中为ABC),以便显示

ABC 11
DEF 3
GHI 2

有没有办法迭代数组并创建一个新数组然后使用?

2 个答案:

答案 0 :(得分:0)

  

有没有办法迭代数组并创建一个新数组然后使用?

无需创建新数组,只需使用数组reduction即可创建包含所有数据的对象。您可以采用的方法是迭代数组并通过初始化尚未找到的值并增加已初始化的值来构建对象:

var convertedObject = arr.reduce(function(obj, item) {
  var g = item.DisplayGroup;
  var v = item.Value;
  if (typeof obj[g] !== 'number') {
    obj[g] = v;   // initialize value that wasn't found yet
  } else {
    obj[g] += v;  // update the value with the current increment
  }
  return obj;
}, {});

然后你可以使用与你拥有的循环类似的循环来构建表:

$.each(convertedObject, function(key, value) {
  table.append('<tr><td>' + key + '</td><td>' + value + '<td></tr>');
});

这是一个正在运行的例子:

var arr = [{
  DisplayGroup: 'ABC',
  Value: 5
}, {
  DisplayGroup: 'DEF',
  Value: 3
}, {
  DisplayGroup: 'ABC',
  Value: 6
}, {
  DisplayGroup: 'GHI',
  Value: 2
}];

// reducing into an object
var convertedObject = arr.reduce(function(obj, item) {
  var g = item.DisplayGroup;
  var v = item.Value;
  if (typeof obj[g] !== 'number') {
    obj[g] = v; // initialize value that wasn't found yet
  } else {
    obj[g] += v; // update the value with the current increment
  }
  return obj;
}, {});

var table = $('#table');
$.each(convertedObject, function(key, value) {
  table.append('<tr><td>' + key + '</td><td>' + value + '<td></tr>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
</table>

如果需要,可以将此对象转换为数组:

var convertedArray = Object.keys(convertedObject).map(function(key) {
  var obj = {};
  obj[key] = object[key];
  return obj;
});

答案 1 :(得分:0)

setup fail
0*80240017 unspecified error

相关问题