jQueryのループオブジェクト - にconsole.logは値を与えるが、HTMLは、私はこのようにそれにオブジェクトとJSON形式の配列を持っている[オブジェクト]

Question

を与える：私がしようとしている

[ 
    { 
     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/
Basiclyは、別の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' } 
 
         ] 
 
     } 
 
    ]; 
 
\t $.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: "+ \t cities.html() +"</p>"); 
 
\t }); 
 
})

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