キーに基づくjsonからhtmlへのテーブル

Question

これは私が持っているjsonファイルです。基本的にこの例のIDに基づいてテーブルを作成したいのですが、id：50はid：57を別のテーブルに表示する必要がありますコードと同じ

{ 
    "version": "5.2", 
    "user_type": "online", 
    "user": 
    [ 
     { 
      "name": "John", 
      "id": 50 
     }, 
     { 
      "name": "Mark", 
      "id": 50 
     }, 
     { 
      "name": "Mark", 
      "id": 57 
     } 
    ] 
} 

上の表は、表

<script type="text/javascript"> 
$(document).ready(function(){ 
$.ajax({ 
    url: "http://PATH/user.json", 
    dataType: 'json', 
    type: 'get', 
    cache:false, 
    success: function(data){ 
     /*console.log(data);*/ 
     $('<tr><td colspan="3"><b>Heading ONE</b></td></tr>').insertBefore('table > thead > tr:first'); 
     var event_data = ''; 
     $.each(data.user, function(index, value){ 
      /*console.log(value);*/ 
      event_data += '<tr>'; 
      event_data += '<td>'+value.name+'</td>'; 
      event_data += '<td>'+value.id+'</td>'; 
      event_data += '</tr>'; 
     }); 
     $("#list_table_json").append(event_data); 
    }, 
    error: function(d){ 
     /*console.log("error");*/ 
     alert("404. Please wait until the File is Loaded."); 
    } 
}); 
}); 
</script> 

どのように私は2つのテーブルを得るのですかを生成するために使用されますか？ またはJSONを出力

を変更すべきでは取得していますID 50と57で同じテーブルである

Answer 1

これをチェックアウトFIDDLEです。

<div id="list_table_json"> 

</div> 

私はちょうどあなたが最初$.parseJSONを使用してJSONをパースしてくださいAJAXで、直接私のコードでJSONを使用しています。

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}"); 

var table; 
$.each(data.user, function(key, value) { 
    var row = $("<tr/>"); 

    if ($('table#main_table_' + value.id).length) 
    table = $("#main_table_" + value.id); 
    else 
    table = $('<table></table>'); 
    table.attr('id', 'main_table_' + value.id); 

    row.append($("<td/>").text(value.name)); 
    row.append($("<td/>").text(value.id)); 

    table.append(row); 

    $("#list_table_json").append(table); 
    $("#list_table_json").append("<br>"); 
}); 

Answer 2

jsonToTable（）をお試しください：

<script type="text/javascript"> 
$(document).ready(function(){ 
$.ajax({ 
    url: "http://PATH/user.json", 
    dataType: 'json', 
    type: 'get', 
    cache:false, 
    success: function(data){ 
     if(data && data !== " ") { 
     $("#list_table_json").append(jsonToTable(data.user.filter(item => item.id === 50))); 
     $("#list_table_json").append(jsonToTable(data.user.filter(item => item.id === 57))); 
     } else { 
      /*console.log("Sorry!");*/ 
      alert("Sorry no data found!"); 
     } 
    }, 
    error: function(d){ 
     /*console.log("error");*/ 
     alert("404. Please wait until the File is Loaded."); 
    } 
}); 
}); 
</script> 

：

<div id="list_50_table"></div> 
<hr/> 
<div id="list_57_table"></div> 


function jsonToTable(data) { 
    var table = $('<table></table>'); 
    $(data).each(function (i, rowData) { 
    var row = $('<tr></tr>'); 
    $(rowData).each(function (j, cellData) { 
     row.append($('<td>'+cellData.name+'</td>')); 
     row.append($('<td>'+cellData.id+'</td>')); 
    }); 
    table.append(row); 
    }); 
    return table; 
} 
$('#list_50_table').append(jsonToTable(data.user.filter(item => item.id === 50))) 
$('#list_57_table').append(jsonToTable(data.user.filter(item => item.id === 57))) 

はこれを試してみてください