Create Object array from XML data using Jquery

Question

I want to extract all the data from the XML which has text nodes that is present in a variable and create an object array. Using Jquery for the same.

I have the below XML data.


var header = ['name', 'data1', 'data2'];
var data = '<parent1>' +
  '<person>' +
  '<name>Name1</name>' +
  '<details>' +
  '<data1>123</data1>' +
  '<data2>34567</data2>' +
  '</details>' + '</child>' + '<person>' +
  '<name>Name1</name>' +
  '<details>' +
  '<data1>123</data1>' +
  '<data2>34567</data2>' +
  '</details>' + '<person>' + '</parent1>';
xmlDoc = $.parseXML( data ),
  $xml = $( xmlDoc ),
 var tabData = [];
  var obj = {};

$xml.find('parent1').each(function(item, index){
    header.forEach(function (item, index) {
    $t = $xml.find(item).text();
    obj[item] =  $t;
});
tabData.push(obj);
obj = {};

The object should contain

{name : Name1, data1 :123, data2:34567}, {name : Name2, data1 :123, data2:34567}.

The loop is not having the access to the textnodes. $this does not help me get the search done for the individual child as well.

Requirement is the function should be dynamic and should work any type of the XML trees.

Could anyone please help.

Could you edit your question and add the looping code you already have as minimal reproducible example? — shaedrich
– shaedrich, Commented Jul 26, 2021 at 10:36

Nathelol · Accepted Answer · 2021-07-26 10:39:54Z

1

You can loop over the xml using parseXML. You did have a few errors in your XML data so double check you have the correct closing XML tags before you continue.

Loop through each person XML element and create a javascript obj then push it into an array.

See example below:

var xml = '<parent1><person><child><name>Name1</name><details><data1>123</data1><data2>34567</data2></details></child></person><person><child><name>Name2</name><details><data1>123</data1><data2>34567</data2></details></child></person></parent1>';
  
var xmlDoc = $.parseXML(xml);
var $xml = $(xmlDoc);
var array = [];

$xml.find('person').each(function (index) {
    var obj = {
      name: $(this).find('name').text(),
      data1: $(this).find('data1').text(),
      data2: $(this).find('data2').text()
  };
  
  array.push(obj);
});

console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jul 26, 2021 at 10:39

Nathelol

6079 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashwin Over a year ago

Appreciate your time. Updated the question. Need the function to be dynamic. Added the one with which I tried, pls check. Thank you.

Collectives™ on Stack Overflow

Create Object array from XML data using Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related