尝试使用 document.write 输出，并使用来自 json 的 for 循环

<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>

需要知道如何将 JSON 对象从 for 循环输出到 document.write。我知道如何输出javascript的唯一方法是控制台.log它或通过警报语句将其发送出去。我需要它将对象中的每个项目从日期输出到不同的航班。

你可以执行以下操作：

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();

相关内容

最新更新

热门标签：