使用jQuery循环遍历JSON数组并输出数据

时间:2016-03-06 22:15:37

标签: javascript jquery arrays json

我正在做一些事情来调用一个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>

目前我只是抓住“DeliveryAddress”数据,这个数据工作正常,因为没有什么可以循环使用这些数据,但我现在正处于数组“MovementInformation”&gt;中我有多个点的位置。 “运动”有多个部分,我需要循环和显示,但不知道如何做到这一点。

1 个答案:

答案 0 :(得分:1)

json.TrackingRecord.MovementInformation.Movement.forEach(function(item) {
  console.log(item)
})