Über einen JSON-Aufruf erhalte ich dieses JSON-Objekt:

[
    {
        "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,
    }
]

Ich versuche, eine Tabelle wie diese zu erstellen:

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

Ich bin eher ein PHP-Typ. Also versuche ich, das Objekt zu schleifen und in ein neues Objekt / Array (in PHP $array[] = array( ... )) zu legen. Aber ich kann es nicht in Javascript / jQuery erledigen.

Kann mir jemand auf dem Weg helfen?

0
LinkinTED 6 Aug. 2015 im 20:25

5 Antworten

Beste Antwort

Nehmen wir an, dass sich json-Daten in einer Variablen namens data befinden. Zuerst können wir das json-Datenarray in ein anderes Objekt transformieren, mit dem die Tabelle erstellt werden kann. Verwenden Sie dann dieses Objekt, um die Tabelle zu erstellen.

Hier in diesem Beispiel bezieht sich Tabelle1 auf die ID der Tabelle.

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



};

Werde Ihnen mit diesem Tisch geben. Sie können jsfiddle für weitere Informationen zu diesem Beispiel verwenden. https://jsfiddle.net/5fambjot/.

0
XPD 6 Aug. 2015 im 18:26

Sie können dies erreichen, indem Sie der Logik folgen

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

Als Referenz - http://plnkr.co/edit/ffshsN8tCE8Tm5puNJCv?p=preview

0
Nikhil Aggarwal 6 Aug. 2015 im 17:34

Angenommen, die supp_name sind pro feeding_id eindeutig, können Sie den folgenden Code verwenden (jsonData, der Ihr ursprüngliches JSON-Array bezeichnet):

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; 
  }, {} ); 
5
rplantiko 6 Aug. 2015 im 17:33
data.forEach(function(element){
    table[element.feeding_id] = table[element.feeding_id] || []
    table[element.feeding_id].push(element)
})

Arbeiten Sie mit der Geige, damit Sie sehen können, wie sich das Datenformat ändert.

https://jsfiddle.net/qgb3ckq6/

1
Georgette Pincin 6 Aug. 2015 im 17:35
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>
0
RRK 6 Aug. 2015 im 17:57