Virgülle ayrılmış değerler: dizelerden nesnelere, liste

Question

JQuery nesneleriyle birleştirmek istediğim virgülle ayrılmış değerler (Ben kaç tane bilmiyorum) içeren dizgilerle 3 değişkenim var. için

"name1,name2,name3,nameN" 
"value1,value2,value3,valueN" 
"id1,id2,id3,idN" 

:

var item1 = { name: name1, value: value1, id: id1 }; 
var item2 = { name: name2, value: value2, id: id2 }; 
var item3 = { name: name3, value: value3, id: id3 }; 
var itemN = { name: nameN, value: valueN, id: idN }; 

sonra bir liste eklemek için örneğin, her öğenin üzerine bir operasyon yineleme için

:

<h3>items</h3> 
<ul> 
    <li>item1</li> 
     <ul> 
      <li>value: <b>value1</b></li> 
      <li>id: <b>id1</b></li> 
     </ul> 

    [...] 

    <li>itemN</li> 
     <ul> 
      <li>value: <b>valueN</b></li> 
      <li>id: <b>idN</b></li> 
     </ul> 
<ul> 

Bunu yapmanın en iyi yolu nedir?

Böyle senin öğelerin bir dizi inşa edebilirsiniz

Answer 1

: O HTML inşa etmek, sonra

var names = "name1,name2,name3,nameN"; 
var values = "value1,value2,value3,valueN"; 
var ids = "id1,id2,id3,idN"; 

var namesArray = names.split(","); 
var valuesArray = values.split(","); 
var idsArray = ids.split(","); 

var item, items = []; 
for (var i = 0; i < namesArray.length; i++) { 
    item = {}; 
    item.name = namesArray[i]; 
    item.value = valuesArray[i]; 
    item.id = idsArray[i]; 
    items.push(item); 
} 

, bunu yapabilirsiniz:

var main = $("<ul>"); 
var str = ""; 
for (var i = 0; i < items.length; i++) { 
    str += "<li>" + items[i].name + "</li><ul><li>value: <b>" + items[i].value + "</b></li>"; 
    str += "<li>id: <b>" + items[i].id + "</b></li></ul>"; 
} 
main.html(str); 
$(document.body).append("<h3>items</h3>") 
$(document.body).append(main); 

Sen burada çalışmak görebilirsiniz: http://jsfiddle.net/jfriend00/yWU3L/4/.

Answer 2

Bunun için DOM'yi kullanmak isteyebilirsiniz.

innerHTML'u kullanmak, javascript'inizde satır içi HTML'ye sahip olmak demektir. Bu, Seperations of concerns'u kırar ve bakım cehennemine yol açar.

Live Example

var createListFragment = (function() { 
    function createItems(names,value,ids) { 
     var namesArray = names.split(","); 
     var valuesArray = value.split(","); 
     var idsArray = ids.split(","); 

     return namesArray.map(function (name, key) { 
      return { 
       name: name, 
       value: valuesArray[key], 
       id: idsArray[key] 
      } 
     });   
    } 

    function createLi(item) { 
     var itemLi = document.createElement("li"); 
     itemLi.textContent = item.name; 

     var propertiesUl = document.createElement("ul"); 
     itemLi.appendChild(propertiesUl); 

     var valueLi = document.createElement("li"); 
     valueLi.appendChild(document.createTextNode("value: ")); 
     var b = document.createElement("b"); 
     b.textContent = item.value; 
     valueLi.appendChild(b); 
     propertiesUl.appendChild(valueLi); 

     var idLi = document.createElement("li"); 
     idLi.appendChild(document.createTextNode("id: ")); 
     var b = document.createElement("b"); 
     b.textContent = item.id; 
     idLi.appendChild(b); 
     propertiesUl.appendChild(idLi); 

     return itemLi; 
    } 

    function createListFragment(names, values, ids) { 
     var items = createItems(names, values, ids); 
     var fragment = document.createDocumentFragment(); 

     var h3 = document.createElement("h3"); 
     h3.textContent = "items"; 
     fragment.appendChild(h3); 

     var ul = document.createElement("ul"); 
     fragment.appendChild(ul); 

     items.forEach(function (item) { 
      var li = createLi(item); 
      ul.appendChild(li); 
     }); 

     return fragment; 
    } 

    return createListFragment; 
})(); 

Çapraz tarayıcı uyumluluğu için bir DOM-shim ve ES5-shim gerekebilir.