कॉमा से अलग मूल्य: स्ट्रिंग्स से ऑब्जेक्ट्स तक सूची

Question

मेरे पास 3 भिन्नताएं हैं जिनमें कॉमा से अलग मूल्य शामिल हैं (मुझे नहीं पता कि कितने) जिन्हें मैं 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 }; 

तो उदाहरण के लिए प्रत्येक आइटम के ऊपर एक ऑपरेशन पुनरावृति करने के लिए, एक सूची संलग्न करने के लिए:

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

यह करने के लिए सबसे अच्छा तरीका क्या है?

Answer 1

आप इस तरह अपने आइटम की एक सरणी का निर्माण कर सकते हैं:

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

फिर, उस से HTML निर्माण करने के लिए, आप यह कर सकते हैं:

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

आप इसे यहाँ काम देख सकते हैं: http://jsfiddle.net/jfriend00/yWU3L/4/।

Answer 2

आप इसके लिए डीओएम का उपयोग करना चाह सकते हैं।

innerHTML का उपयोग करना आपके जावास्क्रिप्ट में इन-लाइन HTML होना है। यह Seperations of concerns तोड़ता है और रखरखाव नरक की ओर जाता है।

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

आप एक DOM-shim और ES5-shim पार ब्राउज़र अनुपालन के लिए आवश्यकता हो सकती है।