How to loop through a XML nodes in javascript?

Question

I tried to loop list items from XML using js. But the list data do not repeat with the bullets points.

Here is my code.

data.xml

<?xml version="1.0"?>
<paintings>
<cd>
  <para>posuere lacus in, accumsan nulla.</para>
  <list>Cras dolor dui hendrerit eget eleifend eu</list>
  <list>Cras dolor dui hendrerit eget eleifend eu</list>
  <list>Cras dolor dui hendrerit eget eleifend eu</list>
</cd>
</paintings>

script.js

 $(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"data.xml",
        dataType:"xml",
        success:xmlParser
    });
});

function xmlParser(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {    

        let para = '<div>' + $(this).find("para").text() + '</div>';                
        let list = '<div>' + $(this).find("list").text() + '</div>';

        let html = `
        <p>${para}</p>
        <ul><li>${list}</li></ul>
        `;
        $("#xmldata").append(html);

    });
}

html

<div class="row" id="xmldata"></div>

score 1 · Answer 1 · 2018-09-14T09:56:03.430

Try $.each and $.find

var xml = '<?xml version="1.0"?><paintings><cd>  <para>posuere lacus in, accumsan nulla.</para><list>Cras dolor dui hendrerit eget eleifend eu 1</list><list>Cras dolor dui hendrerit eget eleifend eu 2</list><list>Cras dolor dui hendrerit eget eleifend eu 3</list></cd></paintings>';
$(function() {
  var out = $('#xmldata');
  var ul = null;
  $(xml).find('cd').children().each(function(_, node) {
    node = $(node);
    if (node.is('para')) {
      out.append($('<p>', {
        'text': node.text()
      }));
      ul = null;
    } else if (node.is('list')) {
      if (!ul) {
        ul = $('<ul>');
        out.append(ul);
      }
      ul.append($('<li>', {
        'text': node.text()
      }));
    } else {
      console.log('unknow node', node);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="xmldata"></div>

score 1 · Answer 2 · answered Sep 14 '18 at 10:21

You can do it by Domparser().

var text, parser, xmlDoc;
text = "<paintings><cd><para>posuere lacus in, accumsan nulla.</para><list>Cras dolor dui hendrerit eget eleifend eu</list><list>Cras dolor dui hendrerit eget eleifend eu</list><list>Cras dolor dui hendrerit eget eleifend eu</list></cd></paintings>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
xmlDoc.getElementsByTagName("para");//return node
xmlDoc.getElementsByTagName("list");//return list arrray

etarhan · Accepted Answer · 2018-09-14T10:08:52.390

You are not looping through all of your list items but are rather just taking the first one. Change your javascript to something like this:

function xmlParser(xml) {
  xml = $(xml).children();
  $(xml).children().each(function () {
    let para = '<div>' + $(this).find("para").text() + '</div>';
    let html = `<p>${para}</p>`;
    html += '<ul>'
    $(this).find("list").each(function () {
      html += `<li>${$(this).text()}</li>`;
    });
    html += '</ul>'
    $("#xmldata").append(html);
  });
}

Only change I made is that it will loop to every list item now so all of them are appended to the DOM.

How to loop through a XML nodes in javascript?

3 Answers3