それぞれjQueryでネストされたオブジェクトをループする

Question

jQueryで配列内の項目を表示しようとしていますが、それはちょうど[object] [Object]を返しています。私はここで間違って何をしていますか？

あり、データがこの形式で返されます。

Object 
1:{gps: "0.000,0.000", street_name: "First Street", street_name_alt: "1st Street"} 
2:{gps: "0.000,0.000", street_name: "Second Street", street_name_alt: "2nd Street"} 

そして私はとて出力するしようとしています：

$.each(data.street, function(key, val) {      
     htm+='<ons-list-item id="'+key+'">'; 
     htm+=' '+val; 
     htm+='</ons-list-item>'; 
}); 

Answer 1

valは、あなたのオブジェクトであり、キーがインデックス..です

あなたはそのプロパティにアクセスする必要があります。 street_name

$.each(data.street, function(key, val) {      
     htm+='<ons-list-item id="'+key+'">'; 
     htm+=' '+val.street_name; 
     htm+='</ons-list-item>'; 
}); 

にアクセスするために元のためにそれはところで、それはネストされたオブジェクトの多次元配列ではありません。 valは完全なオブジェクトを参照するためです

Answer 2

data = {}; 
 
data.street = [{gps: "0.000,0.000", street_name: "First Street", street_name_alt: "1st Street"}, 
 
{gps: "0.000,0.000", street_name: "Second Street", street_name_alt: "2nd Street"}]; 
 

 
var htm = ""; 
 
// updated the arguments to reflect their functions better. 
 
$.each(data.street, function(index, element) {      
 
     htm+='<ons-list-item id="'+index+'">'; 
 
     htm+=' '+element .street_name; 
 
     htm+='</ons-list-item>'; 
 
}); 
 
console.log(htm);

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

。適切な結果を得るには、プロパティ名を使用します。