如何将JSON数据放入html数据中？ [英] How can I put JSON data in html data?
本文介绍了如何将JSON数据放入html数据中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<pre lang="xml"> <script type="text/javascript">
$(document).ready(function () {
function dataToTable($table, obj, collectionName) {
//var obj= objj.d
//Load the properties as headings.
$thead = $table.find('thead');
$tr = $('<tr />');
//get property names and add a th for each property
for (property in obj[collectionName][0]) {
$th = $('<th />');
$th.html(property);
$tr.append($th);
}
//append header row to thead
$thead.append($tr);
//load the data from the routes to the tbody.
$tbody = $table.find('tbody');
$.each(obj[collectionName], function () {
//create row per record
$tr = $('<tr />');
//dynamically get values by property name and load to a td
for (property in this) {
$td = $('<td />');
$td.html(this[property]);
$tr.append($td);
}
//append row to tbody
$tbody.append($tr);
});
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default2.aspx/GetLiveTrainStatus",
data: "{}",
dataType: "json",
success: function (data) {
alert(data.route[0].status);
dataToTable($('#routes'), JSON.stringify(data), 'route');
},
error: function (result) {
alert("Error");
}
});
});
</script>
</pre>
成功函数返回格式如下格式。
while success function return data as below format.
var data = {
"position": "Train Arrived at Barauni Jn. (BJU) at 05:45 PM",
"train_number": "12554",
"response_code": 200,
"error": "",
"total": 21,
"route": [{
"status": "No Delay",
"actdep": "07:50 PM",
"scharr": "Source",
"schdep": "07:50 PM",
"actarr": "12:00 AM",
"station": "New Delhi (NDLS)",
"no": 1
}, {
"status": "4 Minutes Before",
"actdep": "08:28 PM",
"scharr": "08:30 PM",
"schdep": "08:32 PM",
"actarr": "08:26 PM",
"station": "Ghaziabad (GZB)",
"no": 2
}, {
"status": "43 Minutes Late",
"actdep": "10:42 PM",
"scharr": "09:54 PM",
"schdep": "09:59 PM",
"actarr": "10:37 PM",
"station": "Aligarh Jn (ALJN)",
"no": 3
}, {
"status": "30 Minutes Late",
"actdep": "11:40 PM",
"scharr": "11:05 PM",
"schdep": "11:10 PM",
"actarr": "11:35 PM",
"station": "Tundla Jn (TDL)",
"no": 4
}, {
"status": "43 Minutes Late",
"actdep": "12:53 PM",
"scharr": "12:08 AM",
"schdep": "12:10 AM",
"actarr": "12:51 AM",
"station": "Etawah (ETW)",
"no": 5
}, {
"status": "40 Minutes Late",
"actdep": "03:05 AM",
"scharr": "02:20 AM",
"schdep": "02:25 AM",
"actarr": "03:00 AM",
"station": "Kanpur Central (CNB)",
"no": 6
}, {
"status": "43 Minutes Late",
"actdep": "04:48 AM",
"scharr": "03:45 AM",
"schdep": "04:05 AM",
"actarr": "04:28 AM",
"station": "Lucknow Ne (LJN)",
"no": 7
}, {
"status": "54 Minutes Late",
"actdep": "05:51 AM",
"scharr": "04:55 AM",
"schdep": "04:57 AM",
"actarr": "05:49 AM",
"station": "Barabanki Jn (BBK)",
"no": 8
}, {
"status": "68 Minutes Late",
"actdep": "07:33 AM",
"scharr": "06:20 AM",
"schdep": "06:25 AM",
"actarr": "07:28 AM",
"station": "Gonda Jn (GD)",
"no": 9
}, {
"status": "65 Minutes Late",
"actdep": "08:45 AM",
"scharr": "07:35 AM",
"schdep": "07:40 AM",
"actarr": "08:40 AM",
"station": "Basti (BST)",
"no": 10
}, {
"status": "65 Minutes Late",
"actdep": "09:10 AM",
"scharr": "08:03 AM",
"schdep": "08:05 AM",
"actarr": "09:10 AM",
"station": "Khalilabad (KLD)",
"no": 11
}, {
"status": "50 Minutes Late",
"actdep": "10:05 AM",
"scharr": "09:00 AM",
"schdep": "09:15 AM",
"actarr": "09:50 AM",
"station": "Gorakhpur Jn (GKP)",
"no": 12
}, {
"status": "60 Minutes Late",
"actdep": "10:55 AM",
"scharr": "09:53 AM",
"schdep": "09:55 AM",
"actarr": "10:55 AM",
"station": "Deoria Sadar (DEOS)",
"no": 13
}, {
"status": "67 Minutes Late",
"actdep": "12:12 PM",
"scharr": "11:00 AM",
"schdep": "11:05 AM",
"actarr": "12:07 PM",
"station": "Siwan Jn (SV)",
"no": 14
}, {
"status": "40 Minutes Late",
"actdep": "01:05 PM",
"scharr": "12:20 PM",
"schdep": "12:25 PM",
"actarr": "01:00 PM",
"station": "Chhapra (CPR)",
"no": 15
}, {
"status": "35 Minutes Late",
"actdep": "02:05 PM",
"scharr": "01:25 PM",
"schdep": "01:30 PM",
"actarr": "02:00 PM",
"station": "Sonpur Jn (SEE)",
"no": 16
}, {
"status": "33 Minutes Late",
"actdep": "02:18 PM",
"scharr": "01:43 PM",
"schdep": "01:45 PM",
"actarr": "02:15 PM",
"station": "Hajipur Jn (HJP)",
"no": 17
}, {
"status": "40 Minutes Late",
"actdep": "03:33 PM",
"scharr": "02:48 PM",
"schdep": "02:53 PM",
"actarr": "03:28 PM",
"station": "Muzaffarpur Jn (MFP)",
"no": 18
}, {
"status": "45 Minutes Late",
"actdep": "04:45 PM",
"scharr": "03:55 PM",
"schdep": "04:00 PM",
"actarr": "04:40 PM",
"station": "Samastipur Jn (SPJ)",
"no": 19
}, {
"status": "51 Minutes Late",
"actdep": "05:13 PM",
"scharr": "04:20 PM",
"schdep": "04:22 PM",
"actarr": "05:11 PM",
"station": "Dalsingh Sarai (DSS)",
"no": 20
}, {
"status": "30 Minutes Late",
"actdep": "N/A",
"scharr": "05:15 PM",
"schdep": "Destination",
"actarr": "05:45 PM",
"station": "Barauni Jn (BJU)",
"no": 21
}]
};
但它无法正常工作。
而html表就像是
But It is not working.
while html table is like
<table id="routes" class="table">
<thead></thead>
<tbody></tbody>
</table>
推荐答案
（文件）.ready （function（）{
function dataToTable（
(document).ready(function () { function dataToTable(
table，obj，collectionName）{
// var obj = objj.d
//将属性加载为标题。
table, obj, collectionName) { //var obj= objj.d //Load the properties as headings.
thead =
这篇关于如何将JSON数据放入html数据中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
