CODEWITHSUNDEEP
javascriptjqueryarraysjson
James
James

Reputation: 1706

Using jQuery to loop through JSON Array and output data

I'm working on something at the moment to call a PHP file to get some XML data and convert and return as JSON array data which works great and I'm getting and displaying that data however there is one part of the array which I need to loop through to display but stuck with how I do that.

Here is an example json data:

{
   "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\[email protected]}\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"
         }
      }
   }
}

Snippet of 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>

At the moment I am just grabbing the "DeliveryAddress" data which works fine, as nothing to loop through those but I'm at the point now where I have multiple points in the array "MovementInformation" > "Movement" which has multiple parts I need to loop through and display, but no idea how to do this.

Upvotes: 3

Views: 277

Answers (1)

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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

Upvotes: 1

Related Questions