1

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 タグが存在する可能性があります。

私の現在のコードはデータを表示しますが、1 つだけ、つまり最初の 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があります

ここに画像の説明を入力

アップデート

以下のようなものを出力したい

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
4

1 に答える 1

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')、上記の例では、実際には 2 つの要素が含まれています。

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
于 2012-11-13T14:21:31.143 に答える