1

次のようなオブジェクトのJavaScript配列があります。

"partners":[{"username":"fangonk","profileImg":"fangonk.jpg"},
            {"username":"jane","profileImg":"jane.jpg"},
            {"username":"tom_jones","profileImg":"tom.jpg"}]

アンダースコア ライブラリを使用して、各配列のキーの値を出力したいと思います。したがって、各オブジェクトについて、次のようなものを出力したいと思います。

<h1>Username Value</h1><img src="profileImg Value here" />
4

2 に答える 2

1

あなたの「ソース」について少し混乱していますが、これをやろうとしているだけだと思います：

_.each(partners, function(p) { document.write('<h1>' + p.username + '</h1>\
  <img src="' + p.profileImg + '" alt="' + p.username + '" />'); }
//substitute some DOM method (e.g. jquery().append) for document.write

これはあなたが探している結果ですか？

これは、ソースが次のように見える場合にのみ適用されます。

var partners = [{"username":"fangonk","profileImg":"fangonk.jpg"},
                {"username":"jane","profileImg":"jane.jpg"},
                {"username":"tom_jones","profileImg":"tom.jpg"}];

編集：

var someBiggerObject = { 
  partners: [
    {"username":"fangonk","profileImg":"fangonk.jpg"},
    {"username":"jane","profileImg":"jane.jpg"},
    {"username":"tom_jones","profileImg":"tom.jpg"}
  ]
};

_.each(someBiggerObject.partners, function(p) { document.write('<h1>' + p.username + '</h1>\
  <img src="' + p.profileImg + '" alt="' + p.username + '" />'); }
//substitute some DOM method (e.g. jquery().append) for document.write
于 2013-02-28T17:25:05.073 に答える
0

これを行う正しい方法は_.templateです

例

構造が次のような場合：

var list = {"partners":[ 
    {"username":"fangonk","profileImg":"fangonk.jpg"},
    {"username":"jane","profileImg":"jane.jpg"},
    {"username":"tom_jones","profileImg":"tom.jpg"}
]};

繰り返しアイテムテンプレートを作成できます（注type="text/html"）

<script type="text/html" id="userItemTemplate">
    <h1><%= username %></h1><img src='<%= profileImg %>' />
</script>

ループを介して各アイテムをテンプレートに入れます

var uIT = $("#userItemTemplate").html();
_.each(list.partners,function(user){
    $("#target").append(_.template(uIT,user));        
});

また

テンプレートにループを入れます

<script type="text/html" id="userTemplate">
    <% _.each(partners,function(user,key,list){ %>
    <h1><%= user.username %></h1><img src='<%= user.profileImg %>' />
    <% }); %>
</script>

次に、配列全体をプッシュします

var uT = $("#userTemplate").html();
$("#target2").html(_.template(uT,list));

アンダースコアの代わりにlodashを使用していることに注意してください。ほとんどの部分で互換性がありますが、ベンチマークが高速でライブラリが適切に維持されているため、lodashが好きです。

于 2013-03-05T06:43:00.530 に答える