Question

I have the following xml :

<blop></blop>
<yop></yop>
<here>
   <thefirst>value1</thefirst>
   <second>value2</second>
   <thiiiiird>3rdValue</thiiiiird>
<here>

I want to do a table like this :

thefirst value1

second value2

thiiiiird value3

I tried :

$(this).find("here").each(function(){
    $(this).each(function(){$('#stuff').append("<br />"+$(this).text());});
   });

but it display all values at once. How can i create my array? Is it possible in javascript and or Jquery?

Answer 1

You could try looping through the children of here. The way you have it set up now your loops are not gonna get it work.

This might give you some direction…

Creating an array

var hereArr = [];
$(this).find("here").each(function(index, el){
   $(el).children().each(function(index2, el2){
       hereArr[index][el2.nodeName] = $(el2).text();
   });
});

In theory (completely untested, i manually parse xml… so i’m not familiar with jQuery+xml) this would create a multi-dimensional array for you which would looks something like…

//first "here"
[0]['thefirst'] = value1;
[0]['second'] = value2;
[0]['thiiiiird'] = value3;

Output to a table

var htmlStr = "";
$(this).find("here").each(function(index, el){
   $(el).children().each(function(index2, el2){
       htmlStr += "<tr>";
       htmlStr += "   <td>" + el2.nodeName + "</td>";
       htmlStr += "   <td>" + $(el2).text() + "</td>";
       htmlStr += "</tr>";
   });
});
$("table").append( htmlStr );