Giá trị được phân tách bằng dấu phẩy: từ chuỗi thành đối tượng đến danh sách

Question

Tôi có 3 biến với chuỗi chứa giá trị được phân cách bằng dấu phẩy (Tôi không biết có bao nhiêu) mà tôi muốn kết hợp thành đối tượng jQuery.

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

tới:

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

Để sau đó lặp một hoạt động trên từng hạng mục, ví dụ để nối thêm một danh sách:

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

cách tốt nhất để làm điều này là gì?

Answer 1

Bạn có thể xây dựng một loạt các mặt hàng của bạn như thế này:

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

Sau đó, để xây dựng HTML từ đó, bạn có thể làm điều này:

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

Bạn có thể thấy nó hoạt động ở đây: http://jsfiddle.net/jfriend00/yWU3L/4/.

Answer 2

Bạn có thể muốn sử dụng DOM cho việc này.

Sử dụng innerHTML có nghĩa là có HTML nội dòng trong javascript của bạn. Điều này phá vỡ Seperations of concerns và dẫn đến địa ngục bảo trì.

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

Bạn có thể cần một DOM-shim và ES5-shim cho phù hợp trình duyệt chéo.