Question

我有一个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" />

Answer 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

Answer 2

正确的方法是_.template

Example

如果你的结构是这样的：

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，因为基准测试更快，并且库保持良好。

使用underscore.js展平javascript对象数组

2 个答案: