数组循环中的 Jquery 循环对象 - 控制台.log给出值，但 HTML 给出 [对象]

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.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>