0

i have this Json and i need to read one for one with array or other but i want to put these data in a div or li can you help me?

i'm trying solved my problem with php but i don't get nothing

{"meta":{"code":200,"type":"Success","message":"Success"},"data":{"id":"0a393bcdb0a9e069447040ed7a2b7f7b","tracking_number":"1Z762E1W6842003229","carrier_code":"ups","status":"delivered","created_at":"2018-12-24T18:13:03+00:00","updated_at":"2018-12-24T21:58:44+00:00","order_create_time":null,"customer_email":"","title":"","order_id":null,"comment":null,"customer_name":null,"archived":false,"original_country":"Poland","destination_country":"Germany","itemTimeLength":42,"stayTimeLength":62,"origin_info":{"ReferenceNumber":null,"ItemReceived":"2018-09-12 21:50","ItemDispatched":null,"DepartfromAirport":null,"ArrivalfromAbroad":null,"CustomsClearance":null,"DestinationArrived":null,"weblink":"http:\/\/www.ups.com\/content\/pl\/en\/contact\/index.html?WT.svl=Footer","phone":"+48-22-534-00-00","carrier_code":"ups","trackinfo":[{"Date":"2018-10-24 13:01","StatusDescription":"Were attempting to verify the package location. \/ Investigation only","Details":"ROCKFIELD,MD,20850,US","checkpoint_status":"transit"},{"Date":"2018-09-14 09:56","StatusDescription":"Delivered","Details":"DORTMUND,44145,DE","checkpoint_status":"delivered"},{"Date":"2018-09-14 07:26","StatusDescription":"Out For Delivery","Details":"Herne-Boernig,DE","checkpoint_status":"pickup"},{"Date":"2018-09-14 05:00","StatusDescription":"Arrival Scan","Details":"Herne-Boernig,DE","checkpoint_status":"transit"},{"Date":"2018-09-14 02:14","StatusDescription":"Departure Scan","Details":"Langenhagen,DE","checkpoint_status":"transit"},{"Date":"2018-09-13 16:52","StatusDescription":"Arrival Scan","Details":"Langenhagen,DE","checkpoint_status":"transit"},{"Date":"2018-09-13 04:05","StatusDescription":"Departure Scan","Details":"Dobra Strykow,PL","checkpoint_status":"transit"},{"Date":"2018-09-13 01:40","StatusDescription":"Arrival Scan","Details":"Dobra Strykow,PL","checkpoint_status":"transit"},{"Date":"2018-09-13 00:13","StatusDescription":"Departure Scan","Details":"Wolka Kosowska,PL","checkpoint_status":"transit"},{"Date":"2018-09-12 21:50","StatusDescription":"Origin Scan","Details":"Wolka Kosowska,PL","checkpoint_status":"transit","ItemNode":"ItemReceived"},{"Date":"2018-08-11 17:17","StatusDescription":"Order Processed: Ready for UPS","Details":"PL","checkpoint_status":"transit"}]},"service_code":"UPS Standard","weight":"22.00KGS","substatus":null,"lastEvent":"Were attempting to verify the package location. \/ Investigation only,ROCKFIELD,MD,20850,US,2018-10-24 13:01","lastUpdateTime":"2018-10-24 13:01"}}

i can't read anything (data,meta,dates).

i expected same output: 

<div id="data">
<li>id: 0a393bcdb0a9e069447040ed7a2b7f7b</li>
<li>Tracking_number: 1Z762E1W6842003229 </li>
... 
</div>

<br>
<div id="dates">
<li>Date: 2018-09-13 16:52</li>
<li>StatusDescription": :"Departure Scan" </li> ,
<li>Details": Dobra Strykow,PL </li>
<li>checkpoint_status": transit </li>
...
</div>
<hr>

<div id="dates>
other date[2];
...
</div>
<hr>

...
user9186623
  • 13
  • 3

1 Answers1

0

You can tidy up some of the HTML in the templates. But here you go:

var dataObj = {
  "meta": {
    "code": 200,
    "type": "Success",
    "message": "Success"
  },
  "data": {
    "id": "0a393bcdb0a9e069447040ed7a2b7f7b",
    "tracking_number": "1Z762E1W6842003229",
    "carrier_code": "ups",
    "status": "delivered",
    "created_at": "2018-12-24T18:13:03+00:00",
    "updated_at": "2018-12-24T21:58:44+00:00",
    "order_create_time": null,
    "customer_email": "",
    "title": "",
    "order_id": null,
    "comment": null,
    "customer_name": null,
    "archived": false,
    "original_country": "Poland",
    "destination_country": "Germany",
    "itemTimeLength": 42,
    "stayTimeLength": 62,
    "origin_info": {
      "ReferenceNumber": null,
      "ItemReceived": "2018-09-12 21:50",
      "ItemDispatched": null,
      "DepartfromAirport": null,
      "ArrivalfromAbroad": null,
      "CustomsClearance": null,
      "DestinationArrived": null,
      "weblink": "http:\/\/www.ups.com\/content\/pl\/en\/contact\/index.html?WT.svl=Footer",
      "phone": "+48-22-534-00-00",
      "carrier_code": "ups",
      "trackinfo": [{
        "Date": "2018-10-24 13:01",
        "StatusDescription": "Were attempting to verify the package location. \/ Investigation only",
        "Details": "ROCKFIELD,MD,20850,US",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-14 09:56",
        "StatusDescription": "Delivered",
        "Details": "DORTMUND,44145,DE",
        "checkpoint_status": "delivered"
      }, {
        "Date": "2018-09-14 07:26",
        "StatusDescription": "Out For Delivery",
        "Details": "Herne-Boernig,DE",
        "checkpoint_status": "pickup"
      }, {
        "Date": "2018-09-14 05:00",
        "StatusDescription": "Arrival Scan",
        "Details": "Herne-Boernig,DE",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-14 02:14",
        "StatusDescription": "Departure Scan",
        "Details": "Langenhagen,DE",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-13 16:52",
        "StatusDescription": "Arrival Scan",
        "Details": "Langenhagen,DE",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-13 04:05",
        "StatusDescription": "Departure Scan",
        "Details": "Dobra Strykow,PL",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-13 01:40",
        "StatusDescription": "Arrival Scan",
        "Details": "Dobra Strykow,PL",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-13 00:13",
        "StatusDescription": "Departure Scan",
        "Details": "Wolka Kosowska,PL",
        "checkpoint_status": "transit"
      }, {
        "Date": "2018-09-12 21:50",
        "StatusDescription": "Origin Scan",
        "Details": "Wolka Kosowska,PL",
        "checkpoint_status": "transit",
        "ItemNode": "ItemReceived"
      }, {
        "Date": "2018-08-11 17:17",
        "StatusDescription": "Order Processed: Ready for UPS",
        "Details": "PL",
        "checkpoint_status": "transit"
      }]
    },
    "service_code": "UPS Standard",
    "weight": "22.00KGS",
    "substatus": null,
    "lastEvent": "Were attempting to verify the package location. \/ Investigation only,ROCKFIELD,MD,20850,US,2018-10-24 13:01",
    "lastUpdateTime": "2018-10-24 13:01"
  }
};

const packagePanel = (package) => {
  let newPackage = document.createElement("div");
  newPackage.innerHTML = packageData(package) + packageDates(package.origin_info.trackinfo);
  return newPackage;
  
};

const packageData = (package) => {
  return `<ul><li> id: ${package.id}</li> 
  <li> Tracking_number: ${package.tracking_number}</li></ul>`;
};

const packageDates = (dateArr) => {
  let html = '';
  dateArr.forEach(date => {
    html += `<ul><li> ${date.Date} </li> 
             <li> Status Descriuption ${date.StatusDescription} </li>  
             <li> Details : ${date.Details} </li>
             <li> Checkpoint status : ${date.checkpoint_status} </li></ul>`;
  });
  return html;
};

document.addEventListener('DOMContentLoaded', function(){
  console.log('prep');
    document.getElementById("data").appendChild(packagePanel(dataObj.data));
});


 
<div id="data">

</div>
Bibberty
  • 4,670
  • 2
  • 8
  • 23