Comma separated values: from strings to objects to list

Question

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

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

Answer 1

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:

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