Question

I am parsing xml using jquery. I attached an image that shows the sort of xml I want to parse. As you can see that it has several tags but I need to parse following in the order as it is appeared in the image.

ROUTE
   LENGTH time dist
   WALK  time dist
   LINE  code
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
   LINE code
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
      STOP                   //<--- this stop means all stops in this line tag
         NAME val            //<--- val of every stop inside line tag
   WALK time dist

Note: there could be 1, 2 or more than 2 LINES tags.

My current code does show data but for only one i.e. first LINE and only first STOP inside that LINE. So how can I parse this xml so that I could display it as it is in XML?

Here is my code

 parseXMLForRoute = function (xmlObject) {
    var xmlObj = $(xmlObject).find('ROUTE');

    xmlObj.each(function () {
        var el          = $(this),
            startTime   = el.find('WALK').find('LENGTH').attr('time'),
            distance    = el.find('WALK').find('LENGTH').attr('dist'),
            routeTime   = el.find('LENGTH').attr('time'),
            routeDist   = el.find('LENGTH').attr('dist'),
            busNumber   = el.find('LINE').attr('code').slice(1, 4),
            busStops    = el.find('LINE').find('STOP').find('NAME').attr('val');

        container.append(createDOMElement('h4', '', '', 'Departure'))
                 .append(createDOMElement('p', '', '', from))
                 .append(createDOMElement('p', '', '', "Route Time: " + routeTime))
                 .append(createDOMElement('p', '', '', "Route Dist: " + routeDist))
                 .append(createDOMElement('section', '', '', 'WALK PIC'))
                 .append(createDOMElement('p', '', '', "Walk Time: " + startTime))
                 .append(createDOMElement('p', '', '', "Walk Dist: " + distance))
                 .append(createDOMElement('p', '', '', 'BUS PIC'))
                 .append(createDOMElement('p', '', '', "Bus Number: " + parseLineNumbers(xmlObj)))
                 .append(createDOMElement('p', '', '', "Bus Stops: " + busStops));

        //console.log($(this).find('WALK'));
    });
    console.log($(xmlObject));
},

parseLineNumbers = function (xmlObject) {
    console.log('len: ' + $(xmlObject).find('LINE').length);
    $(xmlObject).find('LINE').each(function () {
        console.log($(this).attr('code').slice(1, 4));
    });
    //console.log($(xmlObject).find('LINE').attr('code').slice(1, 4));
},

createDOMElement = function (tagName, classs, id, data) {
    return '<' + tagName + ' class="' + classs + '" id="' + id + '">' + data + '</' + tagName + '>';
}

here is xml

UPDATE

I want to have output something similar to below

Starting street address
WALK this amount of distance(e.g. 1 meter) for some time(e.g. 1 min)
STOP name // after walking then user reached to this stop
code // code attribute inside LINE tag which is a bus number
then display the name and times of all stops in this LINE
code // code attribute inside SECOND LINE
then display all the stops name and times in this second LINE
then walk for some distance(e.g. 1 meter) and some time(e.g. 1 min)
Destination address

Answer 1

You need to iterate over the bus lines and inside each bus line over the bus stops. I hope this leads you in the right directiion.

parseXMLForRoute = function (xmlObject) {    
    var route = $(xmlObject).find('ROUTE');
    route.each(function() {
        var el = $(this);
        var startTime = el.find('WALK').find('LENGTH').attr('time');
        var distance = el.find('WALK').find('LENGTH').attr('dist');
        var routeTime = el.find('LENGTH').attr('time');
        var routeDist = el.find('LENGTH').attr('dist');
        var lines = el.find('LINE');

        container.append(createDOMElement('h4', '', '', 'Departure'))
            .append(createDOMElement('p', '', '', from))
            .append(createDOMElement('p', '', '', "Route Time: " + routeTime))
            .append(createDOMElement('p', '', '', "Route Dist: " + routeDist))
            .append(createDOMElement('section', '', '', 'WALK PIC'))
            .append(createDOMElement('p', '', '', "Walk Time: " + startTime))
            .append(createDOMElement('p', '', '', "Walk Dist: " + distance))

        // now iterate over every bus line
        lines.each(function() {
           var el = $(this);
           var busCode = el.attr('code').slice(1,4);
           container.append(createDOMElement('p', '', '', 'BUS PIC'))
               .append(createDOMElement('p', '', '', 'Bus Number: ' + busCode));
           var stops = el.find('STOP');
           var stops_list = []; // this will hold bus stop names

           // now iterate over every bus stop 
            stops.each(function() {
               var el = $(this).find('NAME'); 
               stops_list.push(el.attr('val'));
            });
            container.append(createDOMElement('p', '', '', 'Bus Stops: ' + stops_list.join(',')));
        });
    });​
}

Note: if .find() matches multiple elements it returns a set of matched elements. For example el.find('WALK') in the example above actually contains two elements:

el.find('WALK')[0].find('LENGTH').attr('time') == 3.540
el.find('WALK')[1].find('LENGTH').attr('time') == 1.743

If you don’t specify an index, you will be dealing with the first element

el.find('WALK').find('LENGTH').attr('time') == 3.540