將json插入表jquery
[英]insert json into table jquery
問題描述
這可能真的很簡單，但我無法讓它發揮作用來挽救我的生命。
我從外部 api 得到以下 json。 現在我嘗試為國家（這是我的關鍵）創建一個循環，為 id、姓名、姓氏、職業和性別創建第二個循環。
{
"Argentina": [
{
"id": 1,
"name": "Silvia",
"last_name": "Msao",
"profession": "actor",
"gender": "Female"
}
],
"France": [
{
"id": 148,
"name": "Pauline",
"last_name": "Huwam",
"profession": "manager",
"gender": "Female"
},
{
"id": 149,
"name": "Pierre-Jean",
"last_name": "La Manche",
"profession": "actor",
"gender": "Male"
}
]
}
現在我必須使用 jquery 庫解析成 html 表。
我的java腳本代碼：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
tables = '<table id="country">\n' +
'\n' +
' <tr>\n' +
' <th colspan="5">Country</th>\n' +
' </tr>\n' +
' <tr>\n' +
' <td>Id</td>\n' +
' <td>Name</td>\n' +
' <td>Last name</td>\n' +
' <td>Additional info</td>\n' +
' <td>Gender</td>\n' +
' </tr>\n' +
//internal loop
' <tr>\n' +
' <td>1</td>\n' +
' <td>kk</td>\n' +
' <td>www</td>\n' +
' <td>sdadainfo</td>\n' +
' <td>Male</td>\n' +
' </tr>\n' +
' </table>';
$( document ).ready(function() {
$.ajax({
type: 'GET',
url: 'http://localhost:8090/di-rest-svc/v1/aggregateddata/ctry/',
dataType: 'json',
success: function (data) {
//TODO
//how to read country from data
$.each(data, function (index, countryPerson) {
console.log(countryPerson[0]);
console.log("dupa");
tables = tables + '<table id="country">\n' +
'\n' +
' <tr>\n' +
' <th colspan="5">Country</th>\n' +
' </tr>\n' +
' <tr>\n' +
' <td>Id</td>\n' +
' <td>Name</td>\n' +
' <td>Last name</td>\n' +
' <td>Additional info</td>\n' +
' <td>Gender</td>\n' +
' </tr>\n';
/*var mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('<td></td>').text("text1").appendTo(row);
}
}*/
/* console.log("TTTTT:"+mytable.html());
mytable.appendTo("#box");*/
$.each(countryPerson, function (index1, person) {
tables = tables + '<tr>\n' +
' <td>person.id</td>\n' +
' <td>person.name</td>\n' +
' <td>person.last_name</td>\n' +
' <td>person.additonal_info</td>\n' +
' <td>person.gender</td>\n' +
' </tr>\n';
// console.log(person.name);
// console.log(person.last_name);
// console.log(person.additonal_info);
// console.log(person.gender);
});
tables = tables + '</table>';
});
}
});
// alert(response);
//document.getElementById("id").innerHTML = response1.id;
//document.getElementById("name").innerHTML = response1.name;
//document.getElementById("lastName").innerHTML = response1.lastName;
//document.getElementById("additionalInfo").innerHTML = response1.additionalInfo;
//document.getElementById("country").innerHTML = response1.country;
//document.getElementById("gender").innerHTML = response1.gender;
alert(tables);
$(tables).appendTo('#tables');
//$('<table><tr><td>xyz</td></tr></table>').appendTo( '#tables' );
//$('<table><tr><td>ccc</td></tr></table>').appendTo( '#tables' );
});
</script>
</head>
<body>
<div id="tables"></div>
</body>
</html>
1 個解決方案
解決方案1
1 2018-08-30 10:14:10
您實際上並未向我們提供詳細的問題陳述，但問題似乎是您將文字字符串打印到表中，而不是插入變量的值。 JavaScript 中引號內的任何內容都被視為字符串並按原樣顯示。 您需要結束字符串，使用變量名稱，然后再次重新啟動字符串：
var data = { "Argentina": [{ "id": 1, "name": "Silvia", "last_name": "Msao", "profession": "actor", "gender": "Female" }], "France": [{ "id": 148, "name": "Pauline", "last_name": "Huwam", "profession": "manager", "gender": "Female" }, { "id": 149, "name": "Pierre-Jean", "last_name": "La Manche", "profession": "actor", "gender": "Male" } ] }; var tables = ""; $.each(data, function(index, countryPerson) { //console.log(countryPerson[0]); //console.log("dupa"); tables = tables + '<table id="country">' + '<tr>' + '<th colspan="5">' + index + '</th>' + '</tr>' + '<tr>' + '<td>Id</td>' + '<td>Name</td>' + '<td>Last name</td>' + '<td>Additional info</td>' + '<td>Gender</td>' + '</tr>'; $.each(countryPerson, function(index1, person) { tables = tables + '<tr>' + '<td>' + person.id + '</td>' + '<td>' + person.name + '</td>' + '<td>' + person.last_name + '</td>' + '<td>' + (person.additional_info ? person.additional_info : "") + '</td>' + '<td>' + person.gender + '</td>' + '</tr>'; }); tables = tables + '</table>'; }); $(tables).appendTo('#tables');
table { border-collapse: collapse; } table td { border: solid 1px #cccccc; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tables"></div>
使用jQuery / Javascript在HTML表中插入Json響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.