Question

我正在尝试遍历一个对象。浏览器中的JSON视图如下所示：

{
    postalcodes: [{
        adminCode2: "708",
        adminCode3: "70805",
        adminName3: "Breitenwang",
        adminCode1: "07",
        adminName2: "Politischer Bezirk Reutte",
        lng: 10.7333333,
        countryCode: "AT",
        postalcode: "6600",
        adminName1: "Tirol",
        placeName: "Breitenwang",
        lat: 47.4833333
    }, {
        adminCode2: "708",
        adminCode3: "70806",
        adminName3: "Ehenbichl",
        adminCode1: "07",
        adminName2: "Politischer Bezirk Reutte",
        lng: 10.7,
        countryCode: "AT",
        postalcode: "6600",
        adminName1: "Tirol",
        placeName: "Ehenbichl",
        lat: 47.4666667
    }, ]
}

到现在为止，我使用了每种方法：

$(document).ready(function(){
    $.getJSON( "http://api.geonames.org/postalCodeLookupJSON?postalcode=6600&country=AT&username=demo", function(data) {
        $.each(data, function(key, val){
            items.push( "<li id='" + key + "'>" + val + "</li>" );
        });
    });

在开发工具中，我看到控制台消息：

["<li id='0'>[object Object]</li>", "<li id='1'>[object Object]</li>",]

实际上我想将所有键值作为嵌套列表元素。如何更正我的jQuery代码才能得到它？

谢谢

编辑回答：这就是我现在所做的：

<script>
$(document).ready(function(){
  $.getJSON( "http://api.geonames.org/postalCodeLookupJSON?postalcode=6600&country=AT&username=demo", function( data ) {
    var items = [];
    $.each(data, function (key, value) {
      $('body').append($('<div></div>').html(key + ' (' + value.length + ' results)'));
      var list = $('<ul></ul>');
      $('body').append(list);
    });
    $.each(data.postalcodes, function(key, val){
      for (var k in val) {
        if (val.hasOwnProperty(k)) {
          items.push( "<li id='" + k + "'>" + val[k] + "</li>" );
          }
      }
      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });

  });
});
</script>

Answer 1

value是一个包含postalcodes属性的对象。在此之后，循环`内的val是包含属性的对象。你想做这样的事情：

$.each(value.postalcodes,function(key,val) {
  //val is now an object with properties adminCode2, adminCode3, etc
  //e.g. items.push("<li id='"+key+"'>"+val.postalcode+"</li>");
});

Answer 2

你想要浏览postalcodes数组，对吗？因为它是一个数组 - 而不是一个对象。

如果是，您可以使用map函数轻松循环

postalcodes.map(function(postal) {
  // now the "postal" is the object which contains the single props 
});

在你的情况下 - 如果你继续使用这个jQuery的东西 - 使用API的响应，获取postalcodes数组并映射它们。返回结果并将它们保存在items var中。。

$(document).ready(function(){
    $.getJSON( "http://api...", function(data) {
        var items = data.postalcodes.map(function(postal, id) {
          return '<li id="' + id + '">' + postal.adminName2 +  '</li>';
        })
    });
});

如果你使用EcmaScript 6

$(document).ready(() =>{
    $.getJSON( "http://api...", (data) => {
        var items = data.postalcodes.map((postal, id) => '<li id="' + id + '">' + postal.adminName2 +  '</li>');
    });
});

希望我能帮忙......

修改

只是一个FYI，在ES6中你可以写得更短:)

$(document).ready(() =>{ $.getJSON( "http://api...", ({postalcodes:zips}) => { const items = zips.map(({adminName2:name}, id) => `<li id="${id}">${name}</li>`); }); });

Answer 3

还没有测试，但是这样的事情？

for (var prop in value) {
 for (var prop2 in value[prop]) {
  items.push( "<li id='" + prop2 + "'>" + value[prop][prop2] + "</li>" );
 }
}

Answer 4

目前还没有api，但我之前保存了一些数据。

var data = {'postalcodes':[{'adminCode2':'708','adminCode3':'70805','adminName3':'Breitenwang','adminCode1':'07'
    ,'adminName2':'Politischer Bezirk Reutte','lng':'10.7333333','countryCode':'AT','postalcode':'6600',
    'adminName1':'Tirol','placeName':'Breitenwang','lat':'47.4833333'},{'adminCode2':'708','adminCode3':'70806',
    'adminName3':'Ehenbichl','adminCode1':'07','adminName2':'Politischer Bezirk Reutte','lng':'10.7',
    'countryCode':'AT','postalcode':'6610', 'adminName1':'Tirol', 'placeName':'Ehenbichl','lat': '47.4666667'}]};

首先，您需要遍历邮政编码，然后为每个对象获取邮政编码的值。

var items = [];
$.each(data.postalcodes, function () {
    items.push("<li id='postalcode'>" + this.postalcode + "</li>");
});
console.log(items);

输出是：

["<li id='postalcode'>6600</li>", "<li id='postalcode'>6610</li>"]

如何遍历对象？

4 个答案: