getjson array jquery undefined

Question

Good day, I'm trying to run a simple getJSON to get information from data json, almost done but when running, get undefined in html

Here's my jquery :

$(document).ready( function() {
  $.getJSON("/airport.json?code=bgw", function(data) {
    $('#stage').html('<p> Name: ' + data.result.request.code + '</p>');
    $.each(data.result.response.airport.pluginData.schedule.arrivals.data, function() {
      $("ul").append("<li>Name: "+this['flight.status.text']+"</li><br />");
    });
  });
});

data json :

`  {
  "result": {
    "response": {
      "airport": {
        "pluginData": {
          "schedule": {
            "arrivals": {
              "data": [
                {
                  "flight": {
                    "status": {
                      "live": true,
                      "text": "Estimated 13:44",
                      "icon": "green",
                      "estimated": null,
                      "ambiguous": false
                    }
                  }
                }
              ]
            }
          }
        }
      }
    }
  }
}
`  

Any ideas on what I might be doing wrong?

Answer 1

You're accessing the nested object as this['flight.status.text'] . I believe you want to do this.flight.status.text . See the difference below

 var data = [{ test: { deep: { nested: { object: 1 } } } }, { test: { deep: { nested: { object: 2 } } } }]; console.log("Not working"); $.each(data, function() { console.log(this['test.deep.nested.object']); }); console.log("--------------"); console.log("Working"); $.each(data, function() { console.log(this.test.deep.nested.object); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Also, as per your your JSON, data.result.request.code doesn't exist.

Answer 2

Use this.flight.status.text to display the text like below

  $(document).ready( function() { data={ "result": { "response": { "airport": { "pluginData": { "schedule": { "arrivals": { "data": [ { "flight": { "status": { "live": true, "text": "Estimated 13:44", "icon": "green", "estimated": null, "ambiguous": false } } } ] } } } } } } }; $('#stage').html('<p> Name: ' + 'bgw' + '</p>'); $.each(data.result.response.airport.pluginData.schedule.arrivals.data, function(){ $("ul").append("<li>Name: "+this.flight.status.text+"</li><br />"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="stage"></div> <ul></ul>