Свести яваскрипт массива объектов с underscore.js

Question

У меня есть яваскрипт массив объекта, который выглядит следующим образом:

"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"}]; 

EDIT:

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, потому что тесты быстрее и библиотека поддерживается хорошо.