Ü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?
5 Antworten
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/.
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
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;
}, {} );
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/
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>