2016-06-11 7 views
0

APIに基づいてテーブルを作成するには以下のコードを使用していますが、配列内にオブジェクト内に存在する場合は問題ありません(lineStatuses [0] .statusSeverityDescriptionなど)しかし、オブジェクト内のオブジェクトが配列内にある場合、それは動作せず、結果[オブジェクトオブジェクト]が返されます。ここでオブジェクトがJavascriptでオブジェクト内にあるJSON配列(API)を取得します

は(私が未定義の最初のレコードに返されることを期待しています)URLからJSONデータのサンプルです:

[ 

    { 

    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities", 

    "id": "bakerloo", 

    "name": "Bakerloo", 

    "modeName": "tube", 

    "disruptions": [], 

    "created": "2016-06-03T12:36:54.19Z", 

    "modified": "2016-06-03T12:36:54.19Z", 

    "lineStatuses": [ 

     { 

     "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities", 

     "id": 0, 

     "statusSeverity": 10, 

     "statusSeverityDescription": "Good Service", 

     "created": "0001-01-01T00:00:00", 

     "validityPeriods": [] 

     } 

    ], 

    "routeSections": [], 

    "serviceTypes": [ 

     { 

     "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities", 

     "name": "Regular", 

     "uri": "/Line/Route?ids=Bakerloo&serviceTypes=Regular" 

     } 

    ] 

    }, 

    { 

    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities", 

    "id": "central", 

    "name": "Central", 

    "modeName": "tube", 

    "disruptions": [], 

    "created": "2016-06-03T12:36:54.037Z", 

    "modified": "2016-06-03T12:36:54.037Z", 

    "lineStatuses": [ 

     { 

     "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities", 

     "id": 0, 

     "lineId": "central", 

     "statusSeverity": 5, 

     "statusSeverityDescription": "Part Closure", 

     "reason": "CENTRAL LINE: Saturday 11 and Sunday 12 June, no service between White City and Ealing Broadway/West Ruislip. This is to enable track replacement work at East Acton and Ruislip Gardens. Replacement buses operate.", 

     "created": "0001-01-01T00:00:00", 

     "validityPeriods": [ 

      { 

      "$type": "Tfl.Api.Presentation.Entities.ValidityPeriod, Tfl.Api.Presentation.Entities", 

      "fromDate": "2016-06-11T03:30:00Z", 

      "toDate": "2016-06-13T01:29:00Z", 

      "isNow": false 

      } 

     ], 

     "disruption": { 

      "$type": "Tfl.Api.Presentation.Entities.Disruption, Tfl.Api.Presentation.Entities", 

      "category": "PlannedWork", 

      "categoryDescription": "PlannedWork", 

      "description": "CENTRAL LINE: Saturday 11 and Sunday 12 June, no service between White City and Ealing Broadway/West Ruislip. This is to enable track replacement work at East Acton and Ruislip Gardens. Replacement buses operate.", 

      "additionalInfo": "Replacement buses operate as follows:Service A: White City - East Acton - North Acton - West Acton - Ealing Common (for District and Piccadilly Lines) - Ealing BroadwayService B: White City - North Acton - Northolt - South Ruislip - Ruislip Gardens - West RuislipService C: White City - North Acton - Park Royal (Piccadilly Line) - Hanger Lane - Perivale - Greenford - Northolt", 

      "created": "2016-05-12T11:04:00Z", 

      "affectedRoutes": [], 

      "affectedStops": [], 

      "isBlocking": true, 

      "closureText": "partClosure" 

     } 

     } 

    ], 

    "routeSections": [], 

    "serviceTypes": [ 

     { 

     "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities", 

     "name": "Regular", 

     "uri": "/Line/Route?ids=Central&serviceTypes=Regular" 

     } 

    ] 

    } 

] 

私もチューブ混乱DIVをリフレッシュするのsetIntervalを使用しようとしていますAPIから更新されたデータを使用していますが、これは動作しません。以下はコードです(上記のJSONデータの一部を返すURLを使用)。私が間違っていることは何ですか?

var xmlhttp = new XMLHttpRequest(); 
var url = "https://api.tfl.gov.uk/line/mode/tube/status"; 

xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     myFunctionDisruption(xmlhttp.responseText); 
    } 
}; 

xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

setInterval(myFunctionDisruption, 600000); 

function myFunctionDisruption(response) { 
    var arr = JSON.parse(response); 
    var i; 
    var out = "<table>"; 

    for(i = 0; i < arr.length; i++) { 
     out += "<tr><td>" + 
     arr[i].lineStatuses[0].disruption.description + <!-- DOES NOT WORK --> 
     "</td></tr>"; 
    } 
    out += "</table>"; 
    document.getElementById("tube-disruption").innerHTML = out; 
} 

答えて

0

以下のコードはあなたのためのテーブルを生成します。汎用tableMaker関数は、オブジェクトの配列、または最初の引数で提供される複数のオブジェクトの配列をとります。これらのキーはテーブルヘッダーの作成に使用され(2番目の引数がtrueに設定されている場合)、値は各行の作成に使用されるため、すべてのオブジェクトは同じキー(プロパティ)を持つ必要があります。 HTMLのテーブルテキストを返します。小さなサイズのデータ​​で動作するtableMaker関数は、hereにあります。また、サンプルやシンプルなデータを使って練習することもできます。

あなたのケースでは、複数のネストされたオブジェクトがあると思います。メインテーブルの対応するセル内の別々のテーブルに変換する必要があります。その目的のために、私はtableMaker関数を利用してこのジョブを再帰的に処理する別の関数tabelizerを持っています。 tabelizerの結果は、マスターテーブルの完全なHTMLテキストです。

は、私は矢印の機能を使用しますが、彼らはSafariやIEで動作しない可能性があります

var tableMaker = (o,h) => {var keys = o.length && Object.keys(o[0]), 
 
          rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                          : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
          rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
          return rows.length ? "<table>" + rows + "</table>" : ""; 
 
          }, 
 
data = [ 
 
    { 
 
    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities", 
 
    "id": "bakerloo", 
 
    "name": "Bakerloo", 
 
    "modeName": "tube", 
 
    "disruptions": [], 
 
    "created": "2016-06-03T12:36:54.19Z", 
 
    "modified": "2016-06-03T12:36:54.19Z", 
 
    "lineStatuses": [ 
 
     { 
 
     "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities", 
 
     "id": 0, 
 
     "statusSeverity": 10, 
 
     "statusSeverityDescription": "Good Service", 
 
     "created": "0001-01-01T00:00:00", 
 
     "validityPeriods": [] 
 
     } 
 
    ], 
 
    "routeSections": [], 
 
    "serviceTypes": [ 
 
     { 
 
     "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities", 
 
     "name": "Regular", 
 
     "uri": "/Line/Route?ids=Bakerloo&serviceTypes=Regular" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities", 
 
    "id": "central", 
 
    "name": "Central", 
 
    "modeName": "tube", 
 
    "disruptions": [], 
 
    "created": "2016-06-03T12:36:54.037Z", 
 
    "modified": "2016-06-03T12:36:54.037Z", 
 
    "lineStatuses": [ 
 
     { 
 
     "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities", 
 
     "id": 0, 
 
     "lineId": "central", 
 
     "statusSeverity": 5, 
 
     "statusSeverityDescription": "Part Closure", 
 
     "reason": "CENTRAL LINE: Saturday 11 and Sunday 12 June, no service between White City and Ealing Broadway/West Ruislip. This is to enable track replacement work at East Acton and Ruislip Gardens. Replacement buses operate.", 
 
     "created": "0001-01-01T00:00:00", 
 
     "validityPeriods": [ 
 
      { 
 
      "$type": "Tfl.Api.Presentation.Entities.ValidityPeriod, Tfl.Api.Presentation.Entities", 
 
      "fromDate": "2016-06-11T03:30:00Z", 
 
      "toDate": "2016-06-13T01:29:00Z", 
 
      "isNow": false 
 
      } 
 
     ], 
 
     "disruption": { 
 
      "$type": "Tfl.Api.Presentation.Entities.Disruption, Tfl.Api.Presentation.Entities", 
 
      "category": "PlannedWork", 
 
      "categoryDescription": "PlannedWork", 
 
      "description": "CENTRAL LINE: Saturday 11 and Sunday 12 June, no service between White City and Ealing Broadway/West Ruislip. This is to enable track replacement work at East Acton and Ruislip Gardens. Replacement buses operate.", 
 
      "additionalInfo": "Replacement buses operate as follows:Service A: White City - East Acton - North Acton - West Acton - Ealing Common (for District and Piccadilly Lines) - Ealing BroadwayService B: White City - North Acton - Northolt - South Ruislip - Ruislip Gardens - West RuislipService C: White City - North Acton - Park Royal (Piccadilly Line) - Hanger Lane - Perivale - Greenford - Northolt", 
 
      "created": "2016-05-12T11:04:00Z", 
 
      "affectedRoutes": [], 
 
      "affectedStops": [], 
 
      "isBlocking": true, 
 
      "closureText": "partClosure" 
 
     } 
 
     } 
 
    ], 
 
    "routeSections": [], 
 
    "serviceTypes": [ 
 
     { 
 
     "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities", 
 
     "name": "Regular", 
 
     "uri": "/Line/Route?ids=Central&serviceTypes=Regular" 
 
     } 
 
    ] 
 
    } 
 
], 
 
tabelizer = (a) => a.length ? tableMaker(a.map(e => Object.keys(e).reduce((p,k) => (p[k] = Array.isArray(e[k]) ? tabelizer(e[k]) : e[k],p),{})),true) 
 
          : "", 
 
tableHTML = tabelizer(data); 
 
          
 
document.write(tableHTML);

を見ることができます。それらを従来の関数表記に変換する必要があるかもしれません。

repl.itでコードを試して、console.logで表示されるHTMLテキストを確認することもできます。

関連する問題