數組循環中的Jquery循環對象-console.log提供值，但HTML提供[object]

Question

我有一個JSON格式的數組，其中包含對象，如下所示：

[
    {
        name: 'pete',
        age: 43,
        addresses : [ 
                        { street: 'Streetway 1', city: 'New York' }, 
                        { street: 'Waystraat 2', city: 'Washington' } 
                    ]
    },
    {
        name: 'harry',
        age: 23,
        addresses : [ 
                        { street: 'Laneway 23', city: 'unknown' } 
                    ]
    }
]

我試圖用jQuery顯示數據，並使用$.each函數，如下所示：

$.each(myArray, function(i, person) {
    $('#myDiv').append("<p class='single-person'>"+person.name+" ("+person.age+"), cities: "+ $.each(person.addresses, function(j, address){ address.city });+"</p>");
});

person.name和person.name person.age正常工作，但是城市顯示為[object Object] 。 但是，當我嘗試使用console.log或向城市發出alert ，它們顯示正常（不在對象中）。

我很想知道我在這里做錯了什么。

提前致謝！

Answer 1

您可能要映射街道並將其連接到字符串：

myArray.forEach(function(person) {
  $('#myDiv').append(
    `<p class='single-person'>
     ${person.name}(${person.age}),
     cities: ${person.addresses.map(a=>a.city).join(",")}
     </p>`
  );
});

上面的代碼使用模板文字。 您也可以使用“ + sth +”代替$ {sth} ... http://jsbin.com/pixogeciya/edit?output

Answer 2

我創建了一個小提琴https://jsfiddle.net/xh5d2krg/
基本上，您可以做的是將城市保存在另一個Jquery元素中，然后將該元素的HTML附加到當前的person元素中。

 $(document).ready(function() { var json = [ { name: 'pete', age: 43, addresses : [ { street: 'Streetway 1', city: 'New York' }, { street: 'Waystraat 2', city: 'Washington' } ] }, { name: 'harry', age: 23, addresses : [ { street: 'Laneway 23', city: 'unknown' } ] } ]; $.each(json, function(i, person) { var cities = $("<span class='cities'></span>"); $.each(person.addresses, function(j, address){ cities.append(address.city); }); $('#myDiv').append("<p class='single-person'>"+person.name+" ("+person.age+"), cities: "+ cities.html() +"</p>"); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id=myDiv></div>