CODEWITHSUNDEEP
javascriptjqueryxml
Syl
Syl

Reputation: 3829

How to create an array of value from a list of node in jquery/xml?

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?

Upvotes: 1

Views: 887

Answers (3)

Derek Adair
Derek Adair

Reputation: 21915

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

Upvotes: 2

jamesmortensen
jamesmortensen

Reputation: 34038

Your XML is not well-formed. your here tag is not properly closed, and this will affect how JQuery processes the response. It may contribute to why you're seeing everything all at once, especially if you're retrieving the response as TEXT instead of as XML.

In Firebug, check the XML tab in the response and you can see that the XML parser complains about an error. The parser also complained because you don't have a documentElement. I wrapped the response in a "result" parent. Here is what your XML should look like:

   <?xml version="1.0" encoding="UTF-8"?>
   <result>
     <blop></blop>
     <yop></yop>
     <here>
       <thefirst>value1</thefirst>
       <second>value2</second> 
       <thiiiiird>3rdValue</thiiiiird>
     </here>
   </result>

Here is an example AJAX call:

 $.ajax({ url: 'xmldoc.xml', dataType: 'xml', success: function(data) {

    // note: success is called ONLY if the XML is well-formed.

    console.info($(data).find('thefirst').text());

    $('table tbody').append('<tr><td>thefirst</td><td>'+$(data).find('thefirst').text()+'</td></tr>');
    $('table tbody').append('<tr><td>second</td><td>'+$(data).find('second').text()+'</td></tr>');
    $('table tbody').append('<tr><td>thiiiiird</td><td>'+$(data).find('thiiiiird').text()+'</td></tr>');

 });

Upvotes: 0

Shaz
Shaz

Reputation: 15867

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

Watch the use of ;

(this should probably be a comment but I can't exactly post them yet)

Upvotes: 0

Related Questions