jqueryデータリストがhtml要素に渡されていません

Question

JSONファイルを読み込み、typeの値を取得しています。私はそれをHTML要素#myListのリストとして渡したいのですが、リストの代わりに[object object]です。しかし私のconsole.logは、私が望むものを正確に示しており、o.typeに格納されています。

$(document).ready(function() { 
    $.getJSON("data.json", function(obj) { 
     $('#myList').data('types', obj.types.map(function(o) { 
      console.log(o.type); 
      return o.type; 
     })).append('<li>' + obj + '</li>'); 
    }); 
}); 

誰かがこれを修正するのに役立つでしょうか？

Answer 1

[object object]を文字列に連結するオブジェクトを連結しているときに、toString(obj)の結果が[object object]であるためです。

Array#mapメソッドを使用してHTMLコードを生成し、要素に追加します。

$(document).ready(function() { 
    $.getJSON("data.json", function(obj) { 
     $('#myList').data('types', obj.types.map(function(o) { 
      console.log(o.type); 
      return o.type; 
     })).append(obj.types.map(function(o) { 
      return '<li>' + o.type + '</li>'; 
     }).join('')); 
    }); 
});