Question

通过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家伙。所以我试图循环Object并将其放入一个新的Object / Array（在PHP $array[] = array( ... )中）。但我无法在Javascript / jQuery中完成它。

有人可以在途中帮助我吗？

Answer 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; 
  }, {} );

Answer 2

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

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

https://jsfiddle.net/qgb3ckq6/

Answer 3

您可以通过遵循逻辑

来实现这一目标

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

让我们假设上面的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/

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

5 个答案: