使用 jQuery 遍历 JSON 数组并输出数据
Using jQuery to loop through JSON Array and output data
我目前正在做一些事情来调用 PHP 文件来获取一些 XML 数据并转换并返回为 JSON 数组数据,效果很好,我正在获取并显示该数据,但是我需要循环显示数组的一部分,但坚持我如何做到这一点。
下面是一个示例 json 数据:
{
"TrackingRecord":{
"Authorised":"Authorised(5.77.48.131)",
"DeliveryAddress":{
"CompanyName":"JAMES DERICK",
"Address1":"6",
"Address2":"LIBER HOUSE",
"Address3":"OLYMPIAN",
"Town":"YORK",
"Postcode":"YO10 3UF",
"ContactName":"JAMES DERICK",
"ContactTelephone":"7507346318"
},
"CollectionAddress":{
"CompanyName":"AMBIENT LOUNGE LTD",
"Address1":"UNIT 3 LONG HEDGE LANE INDUSTR",
"Address2":"BOTTESFORD",
"Address3":{
},
"Town":"NOTTINGHAM",
"Postcode":"NG13 0BF",
"ContactName":"SARAH KIRBY",
"ContactTelephone":"07879 442266074"
},
"ConsignmentInformation":{
"Pieces":"1",
"Pallets":"0",
"Weight":"10",
"Service":"Priority 1",
"DeliveryDate":"2016-02-29T00:00:00",
"ItemsDelivered":"1",
"ConsignmentRef":"2838",
"SpecialInstructions":"JAMES DERICK 7507346318 {JAMES'u003Cbr'u003E14075@GMAIL.COM}'u003Cbr'u003E",
"AdditionalReferencesInformation":{
"AdditionalReferences":{
"Reference":"2838"
}
}
},
"MovementInformation":{
"Movement":[
{
"MovementDate":"2016-02-25T00:00:00",
"MovementTime":"0001-01-01T10:00:04",
"Description":"Created By EZEEWEB",
"DeliveryDepot":"Leeds",
"Round":"019",
"DeliveryDate":"2016-02-26T00:00:00",
"PackagesReceived":"0",
"PackagesDelivered":"0"
},
{
"MovementDate":"2016-02-26T00:00:00",
"MovementTime":"0001-01-01T07:11:53",
"Description":"Out to deliver",
"DeliveryDepot":"Leeds",
"Round":"019",
"DeliveryDate":"2016-02-26T00:00:00",
"PackagesReceived":"1",
"PackagesDelivered":"0"
},
{
"MovementDate":"2016-02-26T00:00:00",
"MovementTime":"0001-01-01T11:00:53",
"Description":"Failed - Other reason",
"DeliveryDepot":"Leeds",
"Round":"019",
"DeliveryDate":"2016-02-29T00:00:00",
"PackagesReceived":"1",
"PackagesDelivered":"0"
},
{
"MovementDate":"2016-02-27T00:00:00",
"MovementTime":"0001-01-01T05:59:32",
"Description":"Out to deliver",
"DeliveryDepot":"Leeds",
"Round":"019",
"DeliveryDate":"2016-02-29T00:00:00",
"PackagesReceived":"1",
"PackagesDelivered":"0"
},
{
"MovementDate":"2016-02-29T00:00:00",
"MovementTime":"0001-01-01T10:55:43",
"Description":"Delivered",
"DeliveryDepot":"Leeds",
"Round":"019",
"DeliveryDate":"2016-02-29T00:00:00",
"PackagesReceived":"1",
"PackagesDelivered":"1"
}
]
},
"TimedInformation":{
"TimedDelivery":{
"Signature":"DERICK",
"SignatureDate":"2016-02-29T00:00:00",
"SignatureTime":"0001-01-01T10:55:00"
}
},
"ScanInformation":{
"Scan":[
{
"PieceID":"148426702251072001",
"Description":"Auto Inbound Scan ()",
"Depot":"Newark",
"ScanDate":"2016-02-25T00:00:00",
"ScanTime":"0001-01-01T17:12:01",
"ScannedBy":"NWK CONVYR"
},
{
"PieceID":"148426702251072001",
"Description":"Auto Inbound Scan ()",
"Depot":"Leeds",
"ScanDate":"2016-02-26T00:00:00",
"ScanTime":"0001-01-01T02:22:08",
"ScannedBy":"LDS CONVYR"
},
{
"PieceID":"148426702251072001",
"Description":"Load C & D (019)",
"Depot":"Leeds",
"ScanDate":"2016-02-26T00:00:00",
"ScanTime":"0001-01-01T03:37:45",
"ScannedBy":"CJONES"
},
{
"PieceID":"148426702251072001",
"Description":"Load C & D (019)",
"Depot":"Leeds",
"ScanDate":"2016-02-26T00:00:00",
"ScanTime":"0001-01-01T23:43:22",
"ScannedBy":"CJONES"
}
]
},
"ImageInformation":{
"PODImage":{
"URL":"http:'/'/www.tpeweb.co.uk'/ezpod'/tpenas'/valid'/20160229'/014842672838___________00000_01.tif"
}
}
}
}
JS的片段:
<div id="tracking">
<div class="delivery"></div>
<div class="movement"></div>
</div>
<script type="text/javascript">
$("document").ready(function(){
var account = getUrlParameter('account');
var reference = getUrlParameter('reference');
$.ajax({
url: 'http://www.ambientlounge.com/external/ukTracking.php',
type: 'POST',
dataType: "json",
data: {
account: account,
reference: reference
},
success: function(json){
$('#tracking .delivery').html(
"<h3>Delivery Details</h3><p>Name: " + json["TrackingRecord"]["DeliveryAddress"]["CompanyName"] + "<br /><h5>Address:</h5>" + json["TrackingRecord"]["DeliveryAddress"]["Address1"] + "<br />" + json["TrackingRecord"]["DeliveryAddress"]["Address2"] + "<br />" + json["TrackingRecord"]["DeliveryAddress"]["Address3"] + "<br />" + json["TrackingRecord"]["DeliveryAddress"]["Town"] + "<br />" + json["TrackingRecord"]["DeliveryAddress"]["Postcode"] + "</p>"
);
for (var i = 0; i < json["MovementInformation"]["Movement"].length; i++) {
console.log(json); // stuck here if im doing right at all!
}
}
});
});
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
</script>
目前,我只是抓取工作正常的"送货地址"数据,因为没有什么可以循环通过这些数据的,但我现在处于"运动信息">"运动"数组中有多个点的点,其中有多个部分我需要循环和显示,但不知道如何做到这一点。
json.TrackingRecord.MovementInformation.Movement.forEach(function(item) {
console.log(item)
})
相关文章:
- 以不同的顺序输出数据
- 如何在客户端输出数据?(express+monodb+jade)
- 使用AJAX获取JSON数据,然后通过HTML上的ElementID输出数据
- 使用 jQuery 遍历 JSON 数组并输出数据
- 在输出数据之前,等待循环完成每个数组项的 $.getJSON
- AJAX JQUERY 代码的哪一部分确定输出数据的占位符
- jQuery/Js 循环使用 Codeigniter MySQL 输出数据
- 角度可编辑滤波器输入和输出数据
- 使用javascript确定一个数组提交按钮,然后使用Ajax输出数据
- JS Json代码没有在视图源上输出数据
- Meteor Template不会在每个语句中输出数据
- 如何循环使用条件遍历JavaScript对象,然后输出数据
- 使用esc_js()保存的输出数据
- 获取从下拉菜单中选择的每个用户要更改的输出数据
- 从AJAX调用输出数据到HTML
- Rails不能以json格式输出数据
- 是否有可能从这些不以HTML源代码输出数据的网站中提取数据?
- 使用JavaScript从XML文件搜索和输出数据
- 从TaffyDB输出数据
- HTML客户端接收连续的服务器输出数据流