Valeurs séparées par des virgules: des chaînes aux objets à la liste

Question

J'ai 3 variables avec des chaînes contenant des valeurs séparées par des virgules (je ne sais pas combien) que je veux combiner en objets jQuery.

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

Pour itérer puis une opération sur chaque élément, par exemple pour ajouter une liste:

<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> 

Quelle est la meilleure façon de le faire?

Answer 1

Vous pouvez construire un tableau de vos articles comme celui-ci:

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); 
} 

Ensuite, pour construire le code HTML, vous pouvez faire ceci:

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); 

Vous pouvez le voir travailler ici: http://jsfiddle.net/jfriend00/yWU3L/4/.

Answer 2

Vous pouvez utiliser le DOM pour cela.

L'utilisation de innerHTML signifie avoir du code HTML en ligne dans votre javascript. Cela casse Seperations of concerns et conduit à l'enfer de maintenance.

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; 
})(); 

Vous pouvez avoir besoin d'un DOM-shim et ES5-shim pour la conditionnalité du navigateur.