javascript 逗号分隔值：从字符串到对象再到列表

Comma separated values: from strings to objects to list

提问by Francesco Frapporti

I have 3 variables with strings containing comma separated values (I don't know how many) which I want to combine into jQuery objects.

我有 3 个变量，字符串包含逗号分隔值（我不知道有多少），我想将它们组合到 jQuery 对象中。

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

to:

到：

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

To then iterate an operation over each item, for example to append a list:

然后对每个项目迭代一个操作，例如附加一个列表：

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

What is the best way to do this?

做这个的最好方式是什么？

回答by jfriend00

You can build an array of your items like this:

您可以像这样构建一个项目数组：

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

Then, to build the HTML from that, you can do this:

然后，要从中构建 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);

You can see it work here: http://jsfiddle.net/jfriend00/yWU3L/4/.

你可以在这里看到它的工作：http: //jsfiddle.net/jfriend00/yWU3L/4/。

回答by Raynos

You may want to use the DOM for this.

您可能希望为此使用 DOM。

Using innerHTMLmeans having in-line HTML in your javascript. This breaks Seperations of concernsand leads to maintenance hell.

使用innerHTML意味着在您的 javascript 中有内嵌 HTML。这打破了关注点的分离并导致维护地狱。

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

You may need a DOM-shimand ES5-shimfor cross browser compliance.

您可能需要一个DOM-shim和ES5-shim来实现跨浏览器的合规性。