如何遍歷一個對象？

我想通過一個對象迭代。在瀏覽器中，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 
    }, ] 
}

直到現在我用的forEach方法：

$(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>

來源

2016-07-06 ytsejam

注意，你所擁有的是一個對象，而不是JSON。 –

所以我應該用循環？ – ytsejam

你想從'postalcodes'數組中獲得什麼值？ –

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

來源

2016-07-06 13:34:28 Adam

亞當做了這份工作，但我不得不與克里斯夫的答案混合，我很接近，但我不能將它附加到HTML。你能檢查我編輯的代碼嗎？我想把它放在身體裏。 – ytsejam

好的解決了我想要的。 – ytsejam

沒有測試過，但財產以後也是這樣嗎？

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

來源

2016-07-06 13:33:54 krisph

最好不要在外部循環的數組上使用'for..in'循環。見[這個問題]（http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea）。正常的'for'循環是最安全的。 – 4castle

你想要通過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>'); 
    }); 
});

希望我可以幫助...

編輯

僅供參考一，在ES6你可以寫它的方式更短的:)

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

來源

2016-07-06 14:00:46

這也是一個有趣的方法，我會研究它。 – ytsejam

的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>"]

來源

2016-07-06 14:11:22 derloopkat

如何遍歷一個對象？

回答

相關問題