Traversing an XML Nodes using javascript

Question

I get the following XML from an AJAX call:

<cars>
<car id="Spyder">
<year>1946</year>
<power>150bhp</power>
<description>A classic car with smooth lines, rounded lights and recessed exhaust.</description>
<image>1.jpg</image>
</car>
<car id="Solaris">
<year>1935</year>
<power>145bhp</power>
<description>A revisionist design, encompassing aggressive engine lines balanced with smooth curves.</description>
<image>2.jpg</image>
</car>
<car id="Career">
<year>1932</year>
<power>250bhp</power>
<description>A triumph of engineering with independent suspension and brakes.</description>
<image>3.jpg</image>
</car>
</cars>

I am trying to fetch all the information about the cars. I tried accessing firstChild.text etc. This was the latest code that I tried, but I'm still getting an exception saying Object #<Element> has no method 'getFirstChild', so presumably there is some problem with the function getFirstChild.

Could some one please guide me as to how I can go ahead, traverse and fetch the data?

Here's my code:

for (var i = 0; i < data.getElementsByTagName("car").length; i++) {
    carname = data.getElementsByTagName("car")[i].getAttribute("id");
    year = data.getElementsByTagName("car")[i].getFirstChild().getTextContent();
    power = data.getElementsByTagName("car")[i].getSecondChild().getTextContent();
    description = data.getElementsByTagName("car")[i].getThirdChild().getTextContent();
    image = data.getElementsByTagName("car")[i].getFourthChild().getTextContent();
    alert(carname + year + power + description + image);
}

Answer 1

for some reason all the above things did not work. The below code worked though..

x=xmlDoc.documentElement;
  y=xmlDoc.documentElement.childNodes;
  var temp1,temp2;
for (i=0;i<y.length;i++)
  {
  if (y[i].nodeType!=3)
    {carname=y[i].getAttribute("id");

    for (z=0;z<y[i].childNodes.length;z++)
      {
        //alert(y[i].childNodes[z].nodeName);
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="year")
        {
          year =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="power")
        {
          power =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="description")
        {
          description =y[i].childNodes[z].childNodes[0].nodeValue;
        }
      if (y[i].childNodes[z].nodeType!=3 && y[i].childNodes[z].nodeName=="image")
        {
          image =y[i].childNodes[z].childNodes[0].nodeValue;
          alert(image);
          image="data\\images\\"+image; 
        }

      }

Hope this helps someone..:-)

Answer 2

In JavaScript you don't have getFirstChild, that's looks like Java DOM APIs. You have a property called firstChild.

I would try something like:

var slice = Function.call.bind(Array.prototype.slice);

var cars = slice(data.getElementsByTagName("car")).reduce(function(cars, node) {
    cars.push(["year", "power", "description", "image"].reduce(function(car, tag) {
      car[tag] = node.getElementsByTagName(tag)[0].textContent;

      return car;
    }, {id: node.getAttribute("id") }));

    return cars;
}, []);

console.log(cars);

Answer 3

Try

var cars = document.getElementsByTagName("car");
for (var i = 0; i < cars.length; i++) {
    var car = cars[i];
    carname = car.getAttribute("id");
    year = getText(car, 'year');
    power = getText(car, 'power');
    description = getText(car, 'description');
    image = getText(car, 'image');
    console.log(carname + year + power + description + image);
}

function getText(car, tag){
    var els = car.getElementsByTagName(tag);
    return els.length ? els[0].innerHTML : '';
}

Answer 4

LIVE DEMO

var myXML = '<cars> \
<car id="Spyder"> \
  <year>1946</year> \
  <power>150bhp</power> \
  <description>A classic car with smooth lines, rounded lights and recessed exhaust.</description>\
  <image>1.jpg</image>\
</car>\
<car id="Solaris">\
  <year>1935</year>\
  <power>145bhp</power>\
  <description>A revisionist design, encompassing agressive engine lines balanced with smooth curves.</description>\
  <image>2.jpg</image>\
</car>\
<car id="Career">\
  <year>1932</year>\
  <power>250bhp</power>\
  <description>A triumph of engineering with independant suspension and brakes.</description>\
  <image>3.jpg</image>\
</car>\
</cars>';


var xmlDoc = $.parseXML( myXML ),
    xml = $(xmlDoc),
    cars = xml.find( "cars" );

$.each(cars.find('car'), function(i, el){
  var car  = $(el),
      id  =  car.attr('id'),
      year =  car.find('year').text(),
      power =  car.find('power').text(),
      description =  car.find('description').text(),
      image =  car.find('image').text() ;
   alert( id+' '+year+' '+power+' '+description+' '+image );
});