我如何顯示JSON數據轉換成HTML

試圖JSON數據呈現到HTML這樣的：我如何顯示JSON數據轉換成HTML

var data = [ 
 
    {"id":"856","name":"India"}, 
 
    {"id":"1035","name":"Chennai"}, 
 
    {"id":"1048","name":"Delhi"}, 
 
    {"id":"1113","name":"Lucknow"}, 
 
    {"id":"1114","name":"Bangalore"}, 
 
    {"id":"1115","name":"Ahmedabad"}, 
 
    {"id":"1116","name":"Cochin"}, 
 
    {"id":"1117","name":"London"}, 
 
    {"id":"1118","name":"New York"}, 
 
    {"id":"1119","name":"California"} 
 
]; 
 
function drawTable(data) { 
 
    for (var i = 0; i < data.length; i++) { 
 
     drawRow(data[i]); 
 
    } 
 
} 
 

 
function drawRow(rowData) { 
 
    var row = $("<tr />") 
 
    $("#myDataTable").append(row); 
 
    row.append($("<td>" + rowData.id + "</td>")); 
 
    row.append($("<td>" + rowData.name + "</td>")); 
 
}

<table id="myDataTable"> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
</table>

但它不工作。

來源

2016-05-19 pradeepks

你的代碼似乎工作..你叫'drawTable（）'什麼地方？發生了什麼？ –

你忘記調用你的'drawTable'函數。通過使用'drawTable（data）;' – antyrat

你不叫你的功能drawTable()。你也可以使用$.each()循環data陣列

var data = [{ 
 
    "id": "856", 
 
    "name": "India" 
 
}, { 
 
    "id": "1035", 
 
    "name": "Chennai" 
 
}, { 
 
    "id": "1048", 
 
    "name": "Delhi" 
 
}, { 
 
    "id": "1113", 
 
    "name": "Lucknow" 
 
}, { 
 
    "id": "1114", 
 
    "name": "Bangalore" 
 
}, { 
 
    "id": "1115", 
 
    "name": "Ahmedabad" 
 
}, { 
 
    "id": "1116", 
 
    "name": "Cochin" 
 
}, { 
 
    "id": "1117", 
 
    "name": "London" 
 
}, { 
 
    "id": "1118", 
 
    "name": "New York" 
 
}, { 
 
    "id": "1119", 
 
    "name": "California" 
 
}]; 
 
drawTable(); 
 

 
function drawTable() { 
 
    var table = $("#myDataTable"); 
 

 
    $.each(data, function(index, rowData) { 
 
    table.append(
 
     "<tr>" 
 
     +"<td>"+rowData.id+"</td>" 
 
     +"<td>"+rowData.name+"</td>" 
 
     +"</tr>" 
 
    ); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myDataTable"> 
 
    <tr> 
 
    <th>Id</th> 
 
    <th>Name</th> 
 
    </tr> 
 
</table>

來源

2016-05-19 14:19:39 Justinas

你的答案是沒有意義的。 OP代碼運行良好，他只是忘記調用'drawTable'。更好地投票結束這樣的問題，因爲他們對SO社區沒有好處。 – antyrat

@antyrat我還提供了OP功能的較短版本。那是錯誤的嗎？ – Justinas

我想說的是，這個問題對於社區沒有用處，應該關閉。我不認爲你幫助OP有更好的優化代碼;） – antyrat

var data = [{ 
 
    "id": "856", 
 
    "name": "India" 
 
}, { 
 
    "id": "1035", 
 
    "name": "Chennai" 
 
}, { 
 
    "id": "1048", 
 
    "name": "Delhi" 
 
}, { 
 
    "id": "1113", 
 
    "name": "Lucknow" 
 
}, { 
 
    "id": "1114", 
 
    "name": "Bangalore" 
 
}, { 
 
    "id": "1115", 
 
    "name": "Ahmedabad" 
 
}, { 
 
    "id": "1116", 
 
    "name": "Cochin" 
 
}, { 
 
    "id": "1117", 
 
    "name": "London" 
 
}, { 
 
    "id": "1118", 
 
    "name": "New York" 
 
}, { 
 
    "id": "1119", 
 
    "name": "California" 
 
}]; 
 

 
function drawRow(rowData) { 
 
    var table = document.getElementById('myDataTable'); 
 

 

 
    for (var i = 0; i < rowData.length; i++) { 
 
    var tr = document.createElement('tr'); 
 
    var td_1 = document.createElement('td'); 
 
    var td_2 = document.createElement('td'); 
 

 
    td_1.innerText = rowData[i].id; 
 
    td_2.innerText = rowData[i].name; 
 

 
    tr.appendChild(td_1); 
 
    tr.appendChild(td_2); 
 

 
    table.appendChild(tr); 
 
    } 
 
} 
 

 

 
drawRow(data);

<table id="myDataTable"> 
 
    <tr> 
 
    <th>Id</th> 
 
    <th>Name</th> 
 
    </tr> 
 

 
</table>

來源

2016-05-19 14:26:06 DININDU

我如何顯示JSON數據轉換成HTML

回答

相關問題