Question

I am trying to convert this loaded DOM to an array format which I can use.

<div>
    <div>[a image]</div>
    <div>
        <p class="ab">text 1</p>
        <p class="bc">text 2</p>
    </div>
</div>
<div>
    <div>[a image]</div>
    <div>
        <p class="ab">text 1</p>
        <p class="bc">text 2</p>
    </div>
</div> 

I Would like to read these div nodes and convert it to an array structure like so:

var arrayObj = [{
“img” : “source”, “ab” : “text”, “bc” : “text” }, { “img” : “source”,
“ab” : “text”, “bc” : “text” }

Could someone please tell me how I can achieve this?

Thanks

Answer 1

Loop through the container’s children[] array. For each one, find the image and the p tags. Assign to a new Object. Push the Object into an array.

Example:

var out = [], container = document.getElementById('container'),
    c = container.children, l = c.length, i, obj, p, m, j;
for( i=0; i<l; i++) {
    obj = {};
    obj.img = c[i].getElementsByTagName('img')[0].src;
    p = c[i].getElementsByTagName('p');
    m = p.length;
    for( j=0; j<m; j++) obj[p[j].className] = p[j].firstChild.nodeValue;
    out[i] = obj;
}
// out