CODEWITHSUNDEEP
jqueryxmlloops
syntaxcode
syntaxcode

Reputation: 133

How to do loop using Jquery .load from an external xml file

I'm trying to access an external xml stored in the same domain and using jquery .load, I want to do a loop within the the rest of the nodes.

Issue: I can only retrieve 1 node using .load.

Here's my external xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Main_List>
<links>
      <header>Header 1</header> 
    - <link_items>
      <url_label>URL Label 1</url_label> 
      <url>http://stackoverflow.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 2</url_label> 
      <url>http://stackoverflow2.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 3</url_label> 
      <url>http://stackoverflow3.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 4</url_label> 
      <url>http://stackoverflow4.com</url> 
      <url_target>_self</url_target> 
      </link_items>
  </links>
  </Main_List>

Here's my script

$( "#header" ).load("main_list.xml header"); 
    $( "#url_label" ).load("main_list.xml url_label");

    // load url to temp div, then set as variable and to change attributes
    $('#temp').load("main_list.xml url", function(url) {
    var getNode_url = $('#temp').text();
    jQuery('#url_label').attr('href',getNode_url);
    });

Here's my target div

<div id="header"></div>
<a id="url_label></a><br>
<div id="temp" style="display:none"></div>

My expected result should be

Header 1
<a href="http://stackoverflow.com" target="_self">URL Label 1</a>
<a href="http://stackoverflow2.com" target="_self">URL Label 2</a>
<a href="http://stackoverflow3.com" target="_self">URL Label 3</a>
<a href="http://stackoverflow4.com" target="_self">URL Label 4</a>

Upvotes: 0

Views: 137

Answers (1)

guest271314
guest271314

Reputation: 1

Try using $.get() , $.parseXML()

$.post("/echo/html/", {
      html: $("pre")[0].innerHTML
  }, function (response) {
      var xml = $($.parseXML(response)).find("main_list");
      xml.find("header").appendTo("#header");
      xml.find("link_items").each(function (i, el) {
          // do stuff with `link_items` elements
          var a = $("<a />", {
              "href": $(el).find("url").text(),
                  "target": $(el).find("url_target").text(),
                  "html": $(el).find("url_label").text() + "<br />"
          });
          $("#temp").append(a)
      })
  })

jsfiddle http://jsfiddle.net/9r3o4v9c/5/

Upvotes: 1

Related Questions