Question

我使用jquery解析xml。我附加了一个图像，显示了我要解析的xml类型。正如你可以看到它有几个标签，但我需要按顺序解析它，因为它出现在图像中。

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

注意：可能有1,2或2个LINES标记。

我当前的代码确实显示数据，但只有一个，即第一个LINE，并且只有该LINE内的第一个STOP。那么我该如何解析这个xml，以便我可以用XML格式显示它？

这是我的代码

 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 + '>';
}

这里是xml

enter image description here

更新

我希望输出类似于下面的内容

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

您需要遍历公交线路并在公交车站的每条公交线路内进行迭代。我希望这能引导你走向正确的方向。

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(',')));
        });
    });
}

注意：如果.find()匹配多个元素，则会返回一组匹配的元素。例如，上例中的el.find('WALK')实际上包含两个元素：

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

如果您没有指定索引，那么您将处理第一个元素

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

按原始顺序解析XML

1 个答案: