将对象循环到另一个对象/数组中答案

【问题标题】：Looping object into another object/ array将对象循环到另一个对象/数组中
【发布时间】：2015-08-06 17:25:47
【问题描述】：

通过 JSON 调用，我得到了这个 JSON 对象：

[
    {
        "feeding_id": 14,
        "supp_name": "Test 1",
        "supp_weight": 20000,
    },
    {
        "feeding_id": 14,
        "supp_name": "Test 2",
        "supp_weight": 1000,
    },
    {
        "feeding_id": 12,
        "supp_name": "Test 1",
        "supp_weight": 4664,
    },
    {
        "feeding_id": 12,
        "supp_name": "Test 2",
        "supp_weight": 2332,
    }
]

我想要实现的是创建一个这样的表：

______________________
| 14 | Test 1 | 20000 |
|    | Test 2 |  1000 |
|____|________|_______|
| 12 | Test 1 |  4664 |
|    | Test 2 |  2332 |
|____|________|_______|

我更喜欢 PHP。所以我试图循环对象并将其放入一个新的对象/数组中（在 PHP $array[] = array( ... ) 中）。但我无法在 Javascript/jQuery 中完成。

有人可以帮我吗？

【问题讨论】：

我唯一的疑问是你想使用的数据结构你可以有一个像 feed_id 这样的对象：[ {sups_name: x, supp_weight : y}, {sups_name: x, supp_weight: y} ] ，可以吗？
也许您可以遍历 JSON 两次？第一次迭代获取“feeding id”的唯一值以获取 arra“ID”，然后通过 JSON 进行第二次迭代检查“feeding_id”并在匹配时显示数据..

标签： javascript jquery arrays json object

【解决方案1】：

假设supp_name 在feeding_id 中是唯一的，您可以使用以下代码（jsonData 表示您的原始 JSON 数组）：

var result = jsonData.reduce( function(acc,rec) { 
  if (!(rec.feeding_id in acc)) acc[rec.feeding_id] = {};
  acc[rec.feeding_id][rec.supp_name]=rec.supp_weight; 
  return acc; 
  }, {} );

【讨论】：

Reduce 只是将一个数组折叠成一个对象，在这种情况下。还有其他方法可以实现相同的目标，但这里有一个小提琴，因此您可以可视化最终结果。 jsfiddle.net/sc21m5sa
感谢您的回答和解释。我现在明白了。问题是，我的 json 对象中有更多变量（在我的问题中没有提到，对不起！）。所以XPD的回答更适合我。 +1 为您提供负担得起且整洁/干净的代码！

【解决方案2】：

data.forEach(function(element){
    table[element.feeding_id] = table[element.feeding_id] || []
    table[element.feeding_id].push(element)
})

工作小提琴，所以你可以看到数据格式的变化。

https://jsfiddle.net/qgb3ckq6/

【讨论】：

【解决方案3】：

让我们假设上面的 json 数据在一个名为 data 的变量中。首先，我们可以将 json 数据数组转换为可用于创建表的不同对象。然后使用该对象创建表。

在此示例中，table1 指的是表的 id。

var obj = {};
for(var i=0;i<data.length;i++){
    var test = obj[data[i]["feeding_id"]];        
    if(!test){
        obj[data[i]["feeding_id"]] = [data[i]];            
    }
    else{
        obj[data[i]["feeding_id"]].push(data[i]);
    }
}
for(key in obj){          
    for(var j= 0;j<obj[key].length;j++){
        var s = $('<tr></tr>'); 
        if(j == 0){
            s.prepend('<td rowspan="'+obj[key].length+'">'+key+'</td>');
        }                
        s.append('<td>'+obj[key][j]["supp_name"]+'</td>');
        s.append('<td>'+obj[key][j]["supp_weight"]+'</td>');
        $('#test1').append(s);
    }



};

会给你那张桌子。您可以在此示例中使用 jsfiddle 了解更多信息。 https://jsfiddle.net/5fambjot/.

【讨论】：

这个答案最适合我。但另一个问题。是否可以根据它的键（DESC）对 obj 进行排序？已经尝试更改生成 JSON 对象的 PHP 代码中的顺序，但没有运气。
或者更好的是，JSON对象内部还有一个字段'datetime'。是否可以对该字段进行排序？

【解决方案4】：

您可以通过以下逻辑来实现这一点

var arr = [
    {
        "feeding_id": 14,
        "supp_name": "Test 1",
        "supp_weight": 20000,
    },
    {
        "feeding_id": 14,
        "supp_name": "Test 2",
        "supp_weight": 1000,
    },
    {
        "feeding_id": 12,
        "supp_name": "Test 1",
        "supp_weight": 4664,
    },
    {
        "feeding_id": 12,
        "supp_name": "Test 2",
        "supp_weight": 2332,
    }
];


var obj = {};

// Creating group by feeding_id
for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    var id = item.feeding_id;
  var resp = {};  
  if(obj[id] === undefined) {
    resp = {
      "supp_name" : [item.supp_name],
      "supp_weight" : [item.supp_weight]
    }

  } else {
       resp = obj[id];
       resp.supp_name.push(item.supp_name);
       resp.supp_weight.push(item.supp_weight);

  }
  obj[id] = resp;

}

// Iterating over feeding_id map
for(var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key);
      console.log(obj[key].supp_name);
      console.log(obj[key].supp_weight);
    }
}

供参考 - http://plnkr.co/edit/ffshsN8tCE8Tm5puNJCv?p=preview

【讨论】：

【解决方案5】：

obj = [{
      "feeding_id": 14,
      "supp_name": "Test 1",
      "supp_weight": 20000,
    }, {
      "feeding_id": 14,
      "supp_name": "Test 2",
      "supp_weight": 1000,
    }, {
      "feeding_id": 12,
      "supp_name": "Test 1",
      "supp_weight": 4664,
    }, {
      "feeding_id": 12,
      "supp_name": "Test 2",
      "supp_weight": 2332,
    }];
$('#content').append($("<table>"));

$.each(obj,function(i, eachVal){
    if( $('tr#feeding_' + eachVal.feeding_id ).length == 0 ){
        var $html = $("<tr></tr>",{
                'id' : 'feeding_' + eachVal.feeding_id,
            });
        $html.append($("<td></td>",{'text':eachVal.feeding_id}));
        $html.append($("<td></td>",{'text':eachVal.supp_name}));
        $html.append($("<td></td>",{'text':eachVal.supp_name}));
        $('#content').find('table').append($html);
    } else {
        var nameRow = $('tr#feeding_' + eachVal.feeding_id ).find('td').eq(1);
        var weightRow = $('tr#feeding_' + eachVal.feeding_id ).find('td').eq(2);
        nameRow.html(nameRow.html() + "<br/>" + eachVal.supp_name)
        weightRow.html(weightRow.html() + "<br/>" + eachVal.supp_weight)
    }
});

td{
    vertical-align:top;
}
table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="content"></div>

【讨论】：