使用jquery加载json嵌套对象

load json nested object with jquery

本文关键字：嵌套 对象 json 加载 jquery 使用      更新时间：2023-11-29

我有airport.json文件。数据就是这样，

{
  "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"
      }
    ]
  }
}

如何在all_airport对象的机场数组中获取"airport_name"、"airport_code"、"location_name"等"airport"数据？

谢谢大家，一切都结束了。

$.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 ));
        });
    }
  });

您的成功函数应该如下所示：

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 ));
  });
}

读过这个答案后，你会更好地理解它：访问/处理（嵌套）对象、数组或JSON

但写了一些代码后肯定会得到它。您可以尝试直接在浏览器的Javascript控制台上编写、编写、测试、修复并重复该过程，直到获得所需的代码。这总是帮助我更好地理解我的代码。

如果不需要JQUERY，请使用JSON.parse，如下所示：

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"}]}}');

JavaScript有一个内置的json解析器：

var jsonObject = JSON.parse(json_string)

然而，它的jQuery版本更好，因为它使用JSON.parse（如果可用），或者创建自己的解析器（jQuery的基本原理）：

var jsonObject = jQuery.parseJSON(json_string)

更多信息：http://api.jquery.com/jQuery.parseJSON/

  • Q： 为什么jQuery.parseJSON（）比JSON.parse（）好
  • A： jQuery.parseJSON与JSON.parse

如果使用JQUERY通过ajax请求json文件，只需添加一个参数：

dataType = json

像这样：

$.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);
    }
})
相关文章：