Question

 <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的唯一方法是console.log或通过alert语句将其发送出去。我需要它将对象中的每个项目从日期输出到不同的航班。

Answer 1

您可以执行以下操作：

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

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

1 个答案: