Question

所以，我很擅长从API获取数据并格式化json，我已经取得了一些重大进展但是我遇到了障碍。

我可以从API获取数据
我可以等待使用回调处理数据
我可以选择嵌套的数据部分
我能够显示数据

我被困在哪里：也许我向Google提出了错误的问题，但我似乎无法找到任何可以让我只返回第5项＆＃34; NY＆＃34;。

当我显示来自short_name的项目时，我得到了所有内容：

11776
Port Jefferson Station
布鲁克海文
萨福克郡
NY
US

如果没有这些部分的名称，我该如何才能显示第5项？ - 纽约

＆＃13;

var the_state = {  
   "results":[  
      {  
         "address_components":[  
            {  
               "long_name":"11776",
               "short_name":"11776",
               "types":[  
                  "postal_code"
               ]
            },
            {  
               "long_name":"Port Jefferson Station",
               "short_name":"Port Jefferson Station",
               "types":[  
                  "locality",
                  "political"
               ]
            },
            {  
               "long_name":"Brookhaven",
               "short_name":"Brookhaven",
               "types":[  
                  "administrative_area_level_3",
                  "political"
               ]
            },
            {  
               "long_name":"Suffolk County",
               "short_name":"Suffolk County",
               "types":[  
                  "administrative_area_level_2",
                  "political"
               ]
            },
            {  
               "long_name":"New York",
               "short_name":"NY",
               "types":[  
                  "administrative_area_level_1",
                  "political"
               ]
            },
            {  
               "long_name":"United States",
               "short_name":"US",
               "types":[  
                  "country",
                  "political"
               ]
            }
         ],
         "formatted_address":"Port Jefferson Station, NY 11776, USA",
         "geometry":{  
            "bounds":{  
               "northeast":{  
                  "lat":40.937698,
                  "lng":-73.008309
               },
               "southwest":{  
                  "lat":40.888503,
                  "lng":-73.0763651
               }
            },
            "location":{  
               "lat":40.90860139999999,
               "lng":-73.0464309
            },
            "location_type":"APPROXIMATE",
            "viewport":{  
               "northeast":{  
                  "lat":40.937698,
                  "lng":-73.008309
               },
               "southwest":{  
                  "lat":40.888503,
                  "lng":-73.0763651
               }
            }
         },
         "place_id":"ChIJJ9atd-BA6IkRfXg_wE1Klkg",
         "postcode_localities":[  
            "PORT JEFF STA",
            "Port Jefferson Station"
         ],
         "types":[  
            "postal_code"
         ]
      }
   ],
   "status":"OK"
};
var state_output = $(".current-state");

$(the_state.results).each(function(k, results){    
  $(results.address_components).each(function(index, address_component) {
   state_output.append("<li>" + address_component.short_name + "</li>");
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="current-state"></ol>

＆＃13;

Answer 1

我怀疑你应该依赖于特定顺序的地址组件，你应该寻找administrative_area_level_1类型。

此外，您应该使用$.each()来循环数组。 $(variable).each()用于循环jQuery集合。

＆＃13;

var the_state = {
  "results": [{
    "address_components": [{
        "long_name": "11776",
        "short_name": "11776",
        "types": [
          "postal_code"
        ]
      },
      {
        "long_name": "Port Jefferson Station",
        "short_name": "Port Jefferson Station",
        "types": [
          "locality",
          "political"
        ]
      },
      {
        "long_name": "Brookhaven",
        "short_name": "Brookhaven",
        "types": [
          "administrative_area_level_3",
          "political"
        ]
      },
      {
        "long_name": "Suffolk County",
        "short_name": "Suffolk County",
        "types": [
          "administrative_area_level_2",
          "political"
        ]
      },
      {
        "long_name": "New York",
        "short_name": "NY",
        "types": [
          "administrative_area_level_1",
          "political"
        ]
      },
      {
        "long_name": "United States",
        "short_name": "US",
        "types": [
          "country",
          "political"
        ]
      }
    ],
    "formatted_address": "Port Jefferson Station, NY 11776, USA",
    "geometry": {
      "bounds": {
        "northeast": {
          "lat": 40.937698,
          "lng": -73.008309
        },
        "southwest": {
          "lat": 40.888503,
          "lng": -73.0763651
        }
      },
      "location": {
        "lat": 40.90860139999999,
        "lng": -73.0464309
      },
      "location_type": "APPROXIMATE",
      "viewport": {
        "northeast": {
          "lat": 40.937698,
          "lng": -73.008309
        },
        "southwest": {
          "lat": 40.888503,
          "lng": -73.0763651
        }
      }
    },
    "place_id": "ChIJJ9atd-BA6IkRfXg_wE1Klkg",
    "postcode_localities": [
      "PORT JEFF STA",
      "Port Jefferson Station"
    ],
    "types": [
      "postal_code"
    ]
  }],
  "status": "OK"
};
var state_output = $(".current-state");

$.each(the_state.results, function(k, results) {
  $.each(results.address_components, function(index, address_component) {
    if (address_component.types.indexOf("administrative_area_level_1") != -1) {
      state_output.append("<li>" + address_component.short_name + "</li>");
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="current-state"></ol>

＆＃13;

Answer 2

只需使用index参数，并记住返回false以停止each循环。

＆＃13;

var the_state = {
  "results": [{
    "address_components": [{
        "long_name": "11776",
        "short_name": "11776",
        "types": [
          "postal_code"
        ]
      },
      {
        "long_name": "Port Jefferson Station",
        "short_name": "Port Jefferson Station",
        "types": [
          "locality",
          "political"
        ]
      },
      {
        "long_name": "Brookhaven",
        "short_name": "Brookhaven",
        "types": [
          "administrative_area_level_3",
          "political"
        ]
      },
      {
        "long_name": "Suffolk County",
        "short_name": "Suffolk County",
        "types": [
          "administrative_area_level_2",
          "political"
        ]
      },
      {
        "long_name": "New York",
        "short_name": "NY",
        "types": [
          "administrative_area_level_1",
          "political"
        ]
      },
      {
        "long_name": "United States",
        "short_name": "US",
        "types": [
          "country",
          "political"
        ]
      }
    ],
    "formatted_address": "Port Jefferson Station, NY 11776, USA",
    "geometry": {
      "bounds": {
        "northeast": {
          "lat": 40.937698,
          "lng": -73.008309
        },
        "southwest": {
          "lat": 40.888503,
          "lng": -73.0763651
        }
      },
      "location": {
        "lat": 40.90860139999999,
        "lng": -73.0464309
      },
      "location_type": "APPROXIMATE",
      "viewport": {
        "northeast": {
          "lat": 40.937698,
          "lng": -73.008309
        },
        "southwest": {
          "lat": 40.888503,
          "lng": -73.0763651
        }
      }
    },
    "place_id": "ChIJJ9atd-BA6IkRfXg_wE1Klkg",
    "postcode_localities": [
      "PORT JEFF STA",
      "Port Jefferson Station"
    ],
    "types": [
      "postal_code"
    ]
  }],
  "status": "OK"
};
var state_output = $(".current-state");

$(the_state.results).each(function(k, results) {
  state_output.append("<li>" + results.address_components[4].short_name + "</li>");
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="current-state"></ol>

＆＃13;

Answer 3

$(the_state.results).each(function(k, results){    
  $(results.address_components).each(function(index, address_component) {
   if(index === 4) {
      state_output.append("<li>" + address_component.short_name + "</li>");
   }
  })
})

只需检查索引，看它是否是数组中的第5个元素。：）希望能帮助到你。 代码未经测试。

Answer 4

您可以将要解析JSON的内容转换为Javascript。像这样：

    var the_state = {
                  "long_name":"New York",
                  "short_name":"NY",
    };

之后

var parsedJSON = JSON.parse(the_state);
document.write(parsedJSON .long_name + ' ' + parsedJSON .short_name);

使用JavaScript / jQuery显示来自未标记字段的JSON数据

4 个答案: