試圖輸出，文件撰寫一個for循環從JSON

<head> 
<title>untitled</title> 
<script type="text/javascript"> 
    var flight = { 
     airline: "Oceanic", 
     number: 815, 
     departure: { 
      IATA: "SYD", 
      dateTime: { 
       date: "2017-09-22", 
       time: "14:55" 
      }, 
      city: "Sydney" 
     }, 
     arrival: { 
      IATA: "LAX", 
      dateTime: { 
       date: "2017-09-23", 
       time: "10:17" 
      }, 
      city: "Los Angeles" 
     } 
    } 

    function startMeUp() { 
     var json = '[{"airline":"Oceanic","number":815,"departure": 
    {"IATA":"SYD","dateTime":{"date ":"2017-0922","time":"14:55"},"city":"Sydney"},"arrival":{"IATA":"LAX","dateTime":{"date" :"2017-09-23","time":"10:17"},"city":"Los Angeles"}},{"airline":"Oceanic","number":407,"departure":{"IATA":"TOR","dateTim e":{"date":"2017-0923","time":"10:55"},"city":"Toronto"},"arrival":{"IATA":"EDM","dateTime":{"date ":"2017-0923","time":"13:55"},"city":"Edmonton"}},{"airline":"Oceanic","number":326,"depa rture":{"IATA":"LND","dateTime":{"date":"2017-0925","time":"04:01"},"city":"London"},"arrival":{"IATA":"VAN","dateTime":{"date" :"2017-09-25","time":"09:55"},"city":"Vancouver"}}]'; // your solution goes here } 
     var obj = JSON.parse(json); 
     for(var i= 0; i < obj.length; i++) { 
      var flights = obj[i]; 

     } 
     Document.writeln(airline); 
     Document.writeln(number); 
      Document.writeln(Departure); 
     Document.writeln(Arrival); 
    </script>

<body onload="startMeUp();"> 

</body>

需要知道如何從for循環到文檔輸出的JSON對象。寫。我知道如何輸出JavaScript的唯一方法是通過console.log或通過alert語句發送出去。我需要它將對象中的每個項目從日期輸出到不同的航班。

來源

2017-08-16 Nick Thibodeau

文件是文件不是文檔 –

'document.writeln'不是優選方式。你可以隨時創建'HTMLElements'並用數據填充它，或者使用'Element.innerHTML'。 'writeln'應該只用於我們如何使用服務器端腳本，因爲它只在文檔流打開時有效，如果關閉它將打開一個新的流，導致混淆。在你的情況下，執行順序也是令人困惑的，不能保證'writeln'在函數調用後被調用，就像你期望的那樣。 – sabithpocker

你可以這樣做：

var flights = JSON.parse(json); 
    var airline, number, departure, arrival; 
    for (var j = 0; j < flights.length; j++) { 
    airline = document.createElement('h1'); 
    airlineText = document.createTextNode(flights[j].airline); 
    airline.append(airlineText); 

    number = document.createElement('h2'); 
    numberText = document.createTextNode(flights[j].number); 
    number.append(numberText); 


    departure = document.createElement('h3'); 
    departureText = document.createTextNode(flights[j].departure.city); 
    departure.append(departureText); 

    arrival = document.createElement('h3'); 
    arrivalText = document.createTextNode(flights[j].arrival.city); 
    arrival.append(arrivalText); 

    document.body.append(airline, number, departure, arrival); 
    }

下面是您代碼固定。

function startMeUp() { 
 
    var json = `[ { 
 
     "airline": "Oceanic", 
 
     "number": 815, 
 
     "departure": { 
 
     "IATA": "SYD", 
 
     "dateTime": { 
 
      "date ": "2017-0922", 
 
      "time": "14:55" 
 
     }, 
 
     "city": "Sydney" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "LAX", 
 
     "dateTime": { 
 
      "date": "2017-09-23", 
 
      "time": "10:17" 
 
     }, 
 
     "city": "Los Angeles" 
 
     } 
 
    }, 
 
    { 
 
     "airline": "Oceanic", 
 
     "number": 407, 
 
     "departure": { 
 
     "IATA": "TOR", 
 
     "dateTim e": { 
 
      "date": "2017-0923", 
 
      "time": "10:55" 
 
     }, 
 
     "city": "Toronto" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "EDM", 
 
     "dateTime": { 
 
      "date ": "2017-0923", 
 
      "time": "13:55" 
 
     }, 
 
     "city": "Edmonton" 
 
     } 
 
    }, { 
 
     "airline": "Oceanic", 
 
     "number": 326, 
 
     "departure": { 
 
     "IATA": "LND", 
 
     "dateTime": { 
 
      "date": "2017-0925", 
 
      "time": "04:01" 
 
     }, 
 
     "city": "London" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "VAN", 
 
     "dateTime": { 
 
      "date": "2017-09-25", 
 
      "time": "09:55" 
 
     }, 
 
     "city": "Vancouver" 
 
     } 
 
    }]`; 
 
    var flights = JSON.parse(json); 
 
    document.writeln(flights[0].airline); 
 
    document.writeln(flights[0].number); 
 
    document.writeln(flights[0].departure.city); 
 
    document.writeln(flights[0].arrival.city); 
 
} 
 
startMeUp();

使用innerHTML

function startMeUp() { 
 
    var json = `[ { 
 
     "airline": "Oceanic", 
 
     "number": 815, 
 
     "departure": { 
 
     "IATA": "SYD", 
 
     "dateTime": { 
 
      "date ": "2017-0922", 
 
      "time": "14:55" 
 
     }, 
 
     "city": "Sydney" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "LAX", 
 
     "dateTime": { 
 
      "date": "2017-09-23", 
 
      "time": "10:17" 
 
     }, 
 
     "city": "Los Angeles" 
 
     } 
 
    }, 
 
    { 
 
     "airline": "Oceanic", 
 
     "number": 407, 
 
     "departure": { 
 
     "IATA": "TOR", 
 
     "dateTim e": { 
 
      "date": "2017-0923", 
 
      "time": "10:55" 
 
     }, 
 
     "city": "Toronto" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "EDM", 
 
     "dateTime": { 
 
      "date ": "2017-0923", 
 
      "time": "13:55" 
 
     }, 
 
     "city": "Edmonton" 
 
     } 
 
    }, { 
 
     "airline": "Oceanic", 
 
     "number": 326, 
 
     "departure": { 
 
     "IATA": "LND", 
 
     "dateTime": { 
 
      "date": "2017-0925", 
 
      "time": "04:01" 
 
     }, 
 
     "city": "London" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "VAN", 
 
     "dateTime": { 
 
      "date": "2017-09-25", 
 
      "time": "09:55" 
 
     }, 
 
     "city": "Vancouver" 
 
     } 
 
    }]`; 
 
    var flights = JSON.parse(json); 
 
    for (var j = 0; j < flights.length; j++) { 
 
    document.body.innerHTML = document.body.innerHTML + '<h1>' + (flights[j].airline) + '</h1>'; 
 
    document.body.innerHTML = document.body.innerHTML + '<h2>' + (flights[j].number) + '</h2>'; 
 
    document.body.innerHTML = document.body.innerHTML + '<h3>' + (flights[j].departure.city) + '</h3>'; 
 
    document.body.innerHTML = document.body.innerHTML + '<h3>' + (flights[j].arrival.city) + '</h3>'; 
 
    } 
 
} 
 
startMeUp();

使用document.createElement

function startMeUp() { 
 
    var json = `[ { 
 
     "airline": "Oceanic", 
 
     "number": 815, 
 
     "departure": { 
 
     "IATA": "SYD", 
 
     "dateTime": { 
 
      "date ": "2017-0922", 
 
      "time": "14:55" 
 
     }, 
 
     "city": "Sydney" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "LAX", 
 
     "dateTime": { 
 
      "date": "2017-09-23", 
 
      "time": "10:17" 
 
     }, 
 
     "city": "Los Angeles" 
 
     } 
 
    }, 
 
    { 
 
     "airline": "Oceanic", 
 
     "number": 407, 
 
     "departure": { 
 
     "IATA": "TOR", 
 
     "dateTim e": { 
 
      "date": "2017-0923", 
 
      "time": "10:55" 
 
     }, 
 
     "city": "Toronto" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "EDM", 
 
     "dateTime": { 
 
      "date ": "2017-0923", 
 
      "time": "13:55" 
 
     }, 
 
     "city": "Edmonton" 
 
     } 
 
    }, { 
 
     "airline": "Oceanic", 
 
     "number": 326, 
 
     "departure": { 
 
     "IATA": "LND", 
 
     "dateTime": { 
 
      "date": "2017-0925", 
 
      "time": "04:01" 
 
     }, 
 
     "city": "London" 
 
     }, 
 
     "arrival": { 
 
     "IATA": "VAN", 
 
     "dateTime": { 
 
      "date": "2017-09-25", 
 
      "time": "09:55" 
 
     }, 
 
     "city": "Vancouver" 
 
     } 
 
    }]`; 
 
    var flights = JSON.parse(json); 
 
    var airline, number, departure, arrival; 
 
    for (var j = 0; j < flights.length; j++) { 
 
    airline = document.createElement('h1'); 
 
    airlineText = document.createTextNode(flights[j].airline); 
 
    airline.append(airlineText); 
 
    
 
    number = document.createElement('h2'); 
 
    numberText = document.createTextNode(flights[j].number); 
 
    number.append(numberText); 
 
    
 
    
 
    departure = document.createElement('h3'); 
 
    departureText = document.createTextNode(flights[j].departure.city); 
 
    departure.append(departureText); 
 
    
 
    arrival = document.createElement('h3'); 
 
    arrivalText = document.createTextNode(flights[j].arrival.city); 
 
    arrival.append(arrivalText); 
 
    
 
    document.body.append(airline, number, departure, arrival); 
 
    } 
 
} 
 
startMeUp();

來源

2017-08-16 15:35:30 sabithpocker

試圖輸出，文件撰寫一個for循環從JSON

回答

相關問題