Loading XML file into JavaScript Array

Question

I know this has been asked about a million times over, however all the scripts I've found either are taylored for the person asking the question or just don't work at all! Basically I'm limited to using normal JavaScript instead of a library like JQuery as its for a uni assignment, however would like to have stored for future use as sometimes JQuery isn't always an option.

Anyway cutting to the chase. I have an XML file called "profiles.xml" which contains a fairly simple structure:

 <?xml version="1.0" encoding="iso-8859-1"?>
 <profiles>
 <profile id="1">
     <pic>images/profiles/person1/x.jpg</pic>
     <name>Joe Bloggs</name>
     <nickname>J-Bloggs</nickname>
     <age>21</age>
     <email>[email protected]</email>
     <role>Web Site Manager</role>
     <likes>
           <like1>Food</like1>
           <like2>Drink</like2>
           <like3>Computing</like3>
           <like4>Music</like4>
     </likes>
     <dislikes>
           <dislike1>Rude People</dislike1>
           <dislike2>Rude People</dislike2>
     </dislikes>
     <favwebsite>http://www.facebook.com</favwebsite>
 </profile>
</profiles>

So basically I'm wanting to load each profile into a seperate new array each time it needs to be accessed but in addition to that would like to do it based on the "id" attribute value. Is this possible? If so how? I've not got any time left to be learning stuff like XPATH etc... This needs to be done using JavaScript and that alone no server side scripting is allowed.

Also as mentioned some scripts just simply don't work as when I try to put it into functions it comes up saying that certain variables aren't defined even when they have been set so need the script to be passing all the information from the XML file into the new Array and have it readily accessible throughout the entire HTML document.

Please someone help, I've spent the past 4-5 weeks trying to work this out on my own as well as many sleepless nights searching on the net for scripts that might give me a clue!

Any help is muchly appreciated! Thanks :-)

Answer 1

Unless I don't fully understand your issue the JSFiddle/code below should help. I used a 2-d array.

var profiles = xml.getElementsByTagName("profile");
var arr = [];
for (var key in profiles){
    arr.push([]);
    var nodes = profiles[key].childNodes;
    for (var ele in nodes){  
        if(nodes[ele]){
          arr[key].push(nodes[ele]);
        }
    }
}
console.log(arr);