I need to edit a script to switch from reading XML data from an xml file to reading data from a JS object array instead.

let's assume the xml file is x.xml:

<xml>
   <location>
     <name>cafe 1</name>
     <address>1 cafe st</address>
   </location>
   <location>
     <name>cafe 2</name>
     <address>2 cafe st</address>
   </location>
</xml>

The below code populates an array with data from an xml file

$.ajax({
               type: "GET",
               url: "x.xml",
               dataType: "xml",
               success: function(xml) {    
                   $(xml).find('location').each(function(){
   i  =1;
                       var name = $(this).find('name').text();
                       var address = $(this).find('address').text();
                     
                        table[i] = {name:name, address:address};
                       
                               
                   });

..can I rewrite that output as

var table = [
                  {"name":"cafe 1", "address":"1 cafe st"},
                  {"name":"cafe 2", "address":"2 cafe st"},
                  ]

...and call data in the array using

var m; 
for ( m = 1; m < table.length-1; m  ) {

                      if (table[m].name == "cafe 1" ....

Trying to get it working as close to this syntax. I just want to get the values into the array in format shown

$(xml).find('location').each(function() {
    i  = 1;
    var name = $(this).find('name').text();
    var address = $(this).find('address').text();
    
  table[i] = {name:name, address:address};
  });

CodePudding user response：

You basically have it, though I simplified your code a bit here

let xml = `<xml>
   <location>
     <name>cafe 1</name>
     <address>1 cafe st</address>
   </location>
   <location>
     <name>cafe 2</name>
     <address>2 cafe st</address>
   </location>
</xml>`

let table = []
$(xml).find('location').each(function(i) {
  // here's one way, using array.push()
  /* 
  table.push({
    name: $(this).find('name').text(),
    address: $(this).find('address').text()
  });
  */
  
  // heres another way, using a specific index
  // i (the index) is supplied by the $.each function
  table[i] = {
    name: $(this).find('name').text(),
    address: $(this).find('address').text()
  }
});

table.forEach(row => {
$('#theTable').append(`<tr><td>${row.name}</td><td>${row.address}</td></tr>`)
})

#theTable td {
padding:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='theTable' border='1'><tr><td>Name</td><td>Address</td></tr></table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>