jsonでループを作成してhtmlテーブルを作成する

Question

これは次の形式で続きます。Passing array php into json gives undefined だから、私はこのようなレスポンスベースの成功AJAXという名前のjsonを持っています：

{ 
"0": { 
    "0": "NO", 
    "1": "COLUMN1", 
    "2": "COLUMN2", 
    "3": "COLUMN3", 
    "4": "COLUMN4", 
    "5": "COLUMN5", 
    "6": "COLUMN6", 
    "7": "COLUMN7", 
    "8": "COLUMN8", 
    "9": "COULMN9", 
    "10": "COLUMN10", 
    "11": "COLUMN11", 
    "12": "COLUMN12", 
    "13": "COLUMN13" 
}, 
"1": { 
    "0": "1", 
    "1": "NYK FUJI ", 
    "2": "AJU150708 ", 
    "3": " ", 
    "4": "6C7132 ", 
    "5": "977NEF ", 
    "6": "JKT-P.T.IRON WORKS ", 
    "7": "977NEF ", 
    "8": "KCH8ATDM ", 
    "9": "17.9", 
    "10": "1690", 
    "11": "2150", 
    "12": "6C7132-1690 ", 
    "13": "175" 
}, 
"2": { 
    "0": "2", 
    "1": "NYK FUJI ", 
    "2": "AJU150708 ", 
    "3": " ", 
    "4": "6C7132 ", 
    "5": "977NEF ", 
    "6": "JKT-P.T.IRON WORKS ", 
    "7": "977NEF ", 
    "8": "KCH8ATDM ", 
    "9": "17.9", 
    "10": "1700", 
    "11": "2138", 
    "12": "6C7132-1700 ", 
    "13": "176" 
    } 
} 

それは魅力的です。今、私はHTMLテーブルに補間するためにそれらにアクセスすることを混乱させる。私はこのようにjqueryのを使用します。

$.each(response.isi, function (i, item) { 
    $('#table-review').find('tbody').append("<tr>" + 
    "<td>" + item + "</td>" + 
    "</tr>"); 
}); 

それは愚か者、だって、私のコードは、私は13列と3行を必要とし、

+--------------+ 
|object Object | 
|object Object | 
|object Object | 
+--------------+ 

この

のように1列でわずか3行を作成します。しかし見えました。 P.P.私の場合はわずか13列ですが、生産中です

Answer 1

itemeachはresponse.isi["0"]に等しいオブジェクトです。したがって、列を作成するにはitemをループする必要があります。理解を深めるために、私は内側のバリバリをrowとcolumnに改名しました。

var response = {}; 
 
response.isi = { 
 
"0": { 
 
    "0": "NO", 
 
    "1": "COLUMN1", 
 
    "2": "COLUMN2", 
 
    "3": "COLUMN3", 
 
    "4": "COLUMN4", 
 
    "5": "COLUMN5", 
 
    "6": "COLUMN6", 
 
    "7": "COLUMN7", 
 
    "8": "COLUMN8", 
 
    "9": "COULMN9", 
 
    "10": "COLUMN10", 
 
    "11": "COLUMN11", 
 
    "12": "COLUMN12", 
 
    "13": "COLUMN13" 
 
}, 
 
"1": { 
 
    "0": "1", 
 
    "1": "NYK FUJI ", 
 
    "2": "AJU150708 ", 
 
    "3": " ", 
 
    "4": "6C7132 ", 
 
    "5": "977NEF ", 
 
    "6": "JKT-P.T.IRON WORKS ", 
 
    "7": "977NEF ", 
 
    "8": "KCH8ATDM ", 
 
    "9": "17.9", 
 
    "10": "1690", 
 
    "11": "2150", 
 
    "12": "6C7132-1690 ", 
 
    "13": "175" 
 
}, 
 
"2": { 
 
    "0": "2", 
 
    "1": "NYK FUJI ", 
 
    "2": "AJU150708 ", 
 
    "3": " ", 
 
    "4": "6C7132 ", 
 
    "5": "977NEF ", 
 
    "6": "JKT-P.T.IRON WORKS ", 
 
    "7": "977NEF ", 
 
    "8": "KCH8ATDM ", 
 
    "9": "17.9", 
 
    "10": "1700", 
 
    "11": "2138", 
 
    "12": "6C7132-1700 ", 
 
    "13": "176" 
 
    } 
 
}; 
 

 
$.each(response.isi, function(r, row) { 
 
    var tr = $('#table-review').find('tbody').append("<tr>"); 
 
    
 
    $.each(row, function(c, column) { 
 
     tr.append("<td>" + column + "</td>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table-review"> 
 
    <tbody></tbody> 
 
</table>

Answer 2

（それをテストしていない）、これを試してください：

var html = ""; 
for(var val in item){ 
    html += "<tr>"; 
    for(var cols in item[val]) 
    { 
     html += "<td>" + item[val][cols ] + "</td>"; 
    } 
    html += "</tr>"; 
} 
$('#table-review').find('tbody').append(html); 

EDIT：

：私はそれをテストし、それが動作する、以下のフィドルを参照してください。

Check Demo Here

Answer 3

JSON内の各キーの値を取得していないようです。

単純な説明では、すべてのJSONオブジェクトはキーと値です。

したがって、各オブジェクト内で繰り返し処理し、各プロパティ値を取得する必要があります。このような何か：あなたのテーブルのHTMLを生成することができ、一般的なtableMakerを使用

for (var col = 0; col < 14; col++) { 
    for (var row = 0; row < 14; row++) { 
    $('#table-review').find('tbody') 
     .append(
     "<tr>" + "<td>" + item[col][row] + "</td>" + "</tr>" 
    ); 
    } 
} 

Answer 4

。オブジェクトの配列をとります。各オブジェクトは、オブジェクトプロパティがヘッダとして使用される行を表します（2番目の引数がtrueとして提供されている場合）。値はセルです。

あなたの場合、getTableDataと呼ばれるユーティリティ機能があり、データをtableMakerに提供するオブジェクトの配列に変換します。

function tableMaker(o,h){ 
 
    var keys = Object.keys(o[0]), 
 
    rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                    : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
     rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
    return "<table>" + rows + "</table>"; 
 
} 
 

 
function getTableData(data){ 
 
    var ok = Object.keys(data); 
 
    return ok.map(k => data[k]); 
 
} 
 

 
var data = { 
 
"0": { 
 
    "0": "NO", 
 
    "1": "COLUMN1", 
 
    "2": "COLUMN2", 
 
    "3": "COLUMN3", 
 
    "4": "COLUMN4", 
 
    "5": "COLUMN5", 
 
    "6": "COLUMN6", 
 
    "7": "COLUMN7", 
 
    "8": "COLUMN8", 
 
    "9": "COULMN9", 
 
    "10": "COLUMN10", 
 
    "11": "COLUMN11", 
 
    "12": "COLUMN12", 
 
    "13": "COLUMN13" 
 
}, 
 
"1": { 
 
    "0": "1", 
 
    "1": "NYK FUJI ", 
 
    "2": "AJU150708 ", 
 
    "3": " ", 
 
    "4": "6C7132 ", 
 
    "5": "977NEF ", 
 
    "6": "JKT-P.T.IRON WORKS ", 
 
    "7": "977NEF ", 
 
    "8": "KCH8ATDM ", 
 
    "9": "17.9", 
 
    "10": "1690", 
 
    "11": "2150", 
 
    "12": "6C7132-1690 ", 
 
    "13": "175" 
 
}, 
 
"2": { 
 
    "0": "2", 
 
    "1": "NYK FUJI ", 
 
    "2": "AJU150708 ", 
 
    "3": " ", 
 
    "4": "6C7132 ", 
 
    "5": "977NEF ", 
 
    "6": "JKT-P.T.IRON WORKS ", 
 
    "7": "977NEF ", 
 
    "8": "KCH8ATDM ", 
 
    "9": "17.9", 
 
    "10": "1700", 
 
    "11": "2138", 
 
    "12": "6C7132-1700 ", 
 
    "13": "176" 
 
    } 
 
}, 
 
tableData = getTableData(data), 
 
tableHTML = tableMaker(tableData,true); 
 
myTable.innerHTML = tableHTML;

<div id="myTable"></div>