load json nested object with jquery

Question

I have airport.json file. That data is just like this,

{
  "diagnostic":{
      "status":200,
      "elapsetime":"12.9290",
      "memoryusage":"15.39MB",
      "confirm":"success",
      "lang":"id",
      "currency":"IDR"
  },
  "output_type":"json",
  "all_airport":{
    "airport":[
      {
        "airport_name":"PATTIMURA",
        "airport_code":"AMQ",
        "location_name":"Ambon",
        "country_id":"id"
      },
      {
        "airport_name":"SOA",
        "airport_code":"BJW",
        "location_name":"Bajawa",
        "country_id":"id"
      },
      {
        "airport_name":"SEPINGGAN",
        "airport_code":"BPN",
        "location_name":"BalikPapan",
        "country_id":"id"
      },
      {
        "airport_name":"SULTAN ISKANDAR MUDA",
        "airport_code":"BTJ",
        "location_name":"Banda Aceh",
        "country_id":"id"
      },
      {
        "airport_name":"HUSEIN SASTRANEGARA",
        "airport_code":"BDO",
        "location_name":"Bandung",
        "country_id":"id"
      },
      {
        "airport_name":"SYAMSUDDIN NOOR",
        "airport_code":"BDJ",
        "location_name":"Banjarmasin",
        "country_id":"id"
      },
      {
        "airport_name":"BLIMBINGSARI",
        "airport_code":"DQJ",
        "location_name":"Banyuwangi",
        "country_id":"id"
      },
      {
        "airport_name":"HANG NADIM",
        "airport_code":"BTH",
        "location_name":"Batam",
        "country_id":"id"
      },
      {
        "airport_name":"BAUBAU",
        "airport_code":"BUW",
        "location_name":"Baubau",
        "country_id":"id"
      }
    ]
  }
}

How to get "airport" data like "airport_name","airport_code","location_name" etc in its array of airport which value of all_airport object?

Thank you all, it done.

$.ajax({
    url:'airport.json',
    dataType: 'json',
    success: function( json ) {
        // get the `airport` array 
        var airports= json.all_airport.airport;

        // loop through the array to populate your list
        $.each(airports, function(i, currentAirport) {  
        // add and option tag to your existing list 
        $('#yourlist').append(new Option( currentAirport.airport_name ));
        });
    }
  });

where is your code ? if you search in Stack Overflow / Google, you'll find a lot of example of parsing JSON using jQuery. — Raptor, Nov 29 '13 at 03:23
*"But, it won't work. My select box still empty."* You have to do some basic debugging on your own. Is the request sent at all? Is the file found by the server and you receive a successful response? Is the data in the format you expect? Learn how to use your browser's developer tools to find out all these things: http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820. — Felix Kling, Nov 29 '13 at 04:00

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

Your success function should look something like this:

success: function(json){
  // get the `airport` array 
  var airports= json.all_airport.airport;

  // loop through the array to populate your list
  $.each(airports, function(i, currentAirport) {  
   // add and option tag to your existing list 
   $('#yourlist').append(new Option( currentAirport.airport_name ));
  });
}

You will understand it better after you read this answer: Access / process (nested) objects, arrays or JSON

But will definitely get it after writing some code. You can try writing directly on your browser's Javascript console, write, test, fix, and repeat the process until you get the code that you need. That always helps me understand my code a little better.

edited May 23 '17 at 10:28

Community

1
1

answered Nov 29 '13 at 04:30

pgpb.padilla

2,318
2
20
44

Thank you very much. I just confuse about how to catch json nested object. It not easy as xml file to read. I think, I will learn more about this. Once again, thanks. – Beye Nov 29 '13 at 05:58
Funny you should say that, many people think it's the other way around, perhaps is just a matter of getting used to the JSON format, which has some advantages over XML in this context. Here are some examples of how XML can be mapped to a JSON equivalent: http://json.org/example – pgpb.padilla Nov 29 '13 at 06:07

score 0 · Answer 2 · answered Nov 29 '13 at 03:25

0

you dont need JQUERY, use JSON.parse like this:

JSON.parse('{"diagnostic":{"status":200,"elapsetime":"12.9290","memoryusage":"15.39MB","confirm":"success","lang":"id","currency":"IDR"},"output_type":"json","all_airport":{"airport":[{"airport_name":"PATTIMURA","airport_code":"AMQ","location_name":"Ambon","country_id":"id"},{"airport_name":"SOA","airport_code":"BJW","location_name":"Bajawa","country_id":"id"},{"airport_name":"SEPINGGAN","airport_code":"BPN","location_name":"BalikPapan","country_id":"id"},{"airport_name":"SULTAN ISKANDAR MUDA","airport_code":"BTJ","location_name":"Banda Aceh","country_id":"id"},{"airport_name":"HUSEIN SASTRANEGARA","airport_code":"BDO","location_name":"Bandung","country_id":"id"},{"airport_name":"SYAMSUDDIN NOOR","airport_code":"BDJ","location_name":"Banjarmasin","country_id":"id"},{"airport_name":"BLIMBINGSARI","airport_code":"DQJ","location_name":"Banyuwangi","country_id":"id"},{"airport_name":"HANG NADIM","airport_code":"BTH","location_name":"Batam","country_id":"id"},{"airport_name":"BAUBAU","airport_code":"BUW","location_name":"Baubau","country_id":"id"}]}}');

answered Nov 29 '13 at 03:25

Ted

51
2

How about *.json file? it can be like this "JSON.parse(*.json)"? – Beye Nov 29 '13 at 03:41
@user2349609: No, `JSON.parse` expects a string containing JSON. You have to load the data first. Since you are using jQuery, read the documentation about `$.getJSON`. It contains everything you have to know. http://api.jquery.com/jQuery.getJSON/ – Felix Kling Nov 29 '13 at 03:56
@FelixKling: I have read that documentation. But it still won't work. I'm just load it, then in "success" step, I can't display it in html elemnt. – Beye Nov 29 '13 at 04:00
@user2349609: See my other comment on your question. You have to do some debugging on your own. First step: find out whether the `success` callback is called at all. If not, an error handler which will give you more information about what is wrong. It's impossible for us to tell you what the problem is, only you can run your code, have the file, etc. – Felix Kling Nov 29 '13 at 04:01

score 0 · Answer 3 · edited May 23 '17 at 12:15

JavaScript has a built in json parser:

var jsonObject = JSON.parse(json_string)

However the jQuery version of it is better, as it uses JSON.parse if it's available, or creates its own parser if not (philosophy of jQuery in basic terms):

var jsonObject = jQuery.parseJSON(json_string)

More information: http://api.jquery.com/jQuery.parseJSON/

Q: Why is jQuery.parseJSON() better than JSON.parse() ?
A: jQuery.parseJSON vs JSON.parse

score 0 · Answer 4 · answered Nov 29 '13 at 03:36

0

If you use JQUERY request the json file via ajax, only add a parameter:

dataType = json

like that:

$.ajax({
    url: "your request url",
    dataType: "json",
    data:{
        "your parameters of url"
    },
    success: function(responseData){
        //responseData has been parsed to a object
        console.log(responseData.foo);
    }
})

answered Nov 29 '13 at 03:36

danny.hu

110
3

what is "your parameter of url" look like based on my airport.json file? – Beye Nov 29 '13 at 03:56
@user2349609: You can probably omit that setting. – Felix Kling Nov 29 '13 at 03:57

load json nested object with jquery

4 Answers4