Currently in my JQuery script I have a hard coded array:
var arrayList = [
{"id":"1","category":"foo1","title":"bar1","image":"images/foobar1.gif"},
{"id":"2","category":"foo2","title":"bar2","image":"images/foobar2.gif"},
etc....
];
Instead of that array being hard coded in my script I need to create that dynamically from a set of HTML unordered lists that are generated from the system so the markup would be:
<ul>
<li>1</li>
<li>foo1</li>
<li>bar1</li>
<li>images/foobar1.gif</li>
</ul>
<ul>
<li>2</li>
<li>foo2</li>
<li>bar2</li>
<li>images/foobar2.gif</li>
</ul>
etc....
I would need:
var arrayList = new Array (that has been created)
How can I do this so that a new array object is created and it doesn't just see the output as a text string?
First, for more flexibility, I'd suggest you modify your markup to store the list item keys in data
attributes:
<ul>
<li data-key="id">1</li>
<li data-key="category">foo1</li>
<li data-key="title">bar1</li>
<li data-key="image">images/foobar1.gif</li>
</ul>
<ul>
<li data-key="id">2</li>
<li data-key="category">foo2</li>
<li data-key="title">bar2</li>
<li data-key="image">images/foobar2.gif</li>
</ul>
From there, you can use map() to build your objects:
var arrayList = $("ul").map(function() {
var obj = {};
$("li", this).each(function() {
var $this = $(this);
obj[$this.data("key")] = $this.text();
});
return obj;
}).get();
You can see the results in this fiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With