使用JavaScript使用JSON填充HTML

Question

有點麻煩。 目的是使用JavaScript中已請求的JSON數據填充HTML頁面。 我已經在文檔中成功顯示了http請求代碼和狀態。 但是，我無法成功顯示JSON中的數據。 我不確定JS的第7行是否正確，因為我是從一個示例中得出的。 同樣在JS的第13行中，我無法正常工作。 （我只想使用JavaScript和HTML-不能使用AJAX，JQUERY等。）任何建議都將有所幫助，到目前為止，我在該網站上沒有發現任何與我的問題類似的東西。

下面是HTML

<!DOCTYPE html>
<html>
<head>
    <script src="NEO.js"></script>
<title>NEO</title>
</head>
<body onload="getData()">
<p id="xhrStatus">text</p>
<p id="xhrText">text1</p>
<p id="neoName">name</p>
</body>
</html>

下面是JS

function getData()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "ADDRESS LEFT BLANK INTENTIONALLY FOR STACKOVERFLOW", false);
xhr.send(null)
var responseData = JSON.parse(xhr.response);
//the line above is base off of an example. Not sure if it's correct

document.getElementById("xhrStatus").innerHTML = xhr.status;
document.getElementById("xhrText").innerHTML = xhr.statusText;

//Having trouble with line below. Not grabbing data correctly.
var neoName = responseData.near_earth_objects.2017-03-15[0];
document.getElementById("neoName").innerHTML = neoName;
}

下面是JSON（來自在地址欄中發出呼叫）

{
  "links": {
    "next": "ADDRESS LEFT OUT INTENTIONALLY",
    "prev": "ADDRESS LEFT OUT INTENTIONALLY",
    "self": "ADDRESS LEFT OUT INTENTIONALLY"
  },
  "element_count": 5,
  "near_earth_objects": {
    "2017-03-15": [
      {
        "links": {
          "self": "ADDRESS LEFT OUT INTENTIONALLY"
        },
        "neo_reference_id": "2011398",
        "name": "11398 (1998 YP11)",
        "nasa_jpl_url": "ADDRESS LEFT OUT INTENTIONALLY",
        "absolute_magnitude_h": 16.3,
        "estimated_diameter": {
          "kilometers": {
            "estimated_diameter_min": 1.4606796427,
            "estimated_diameter_max": 3.2661789745
          },
          "meters": {
            "estimated_diameter_min": 1460.6796427136,
            "estimated_diameter_max": 3266.1789744576
          },
          "miles": {
            "estimated_diameter_min": 0.9076239703,
            "estimated_diameter_max": 2.0295088955
          },
          "feet": {
            "estimated_diameter_min": 4792.2561990004,
            "estimated_diameter_max": 10715.8106265596
          }
        },
        "is_potentially_hazardous_asteroid": false,
        "close_approach_data": [
          {
            "close_approach_date": "2017-03-15",
            "epoch_date_close_approach": 1489561200000,
            "relative_velocity": {
              "kilometers_per_second": "7.6545148105",
              "kilometers_per_hour": "27556.2533179201",
              "miles_per_hour": "17122.384179682"
            },
            "miss_distance": {
              "astronomical": "0.2788205228",
              "lunar": "108.4611816406",
              "kilometers": "41710956",
              "miles": "25917986"
            },
            "orbiting_body": "Earth"
          }
        ],
        "orbital_data": {
          "orbit_id": "232",
          "orbit_determination_date": "2017-03-14 06:21:59",
          "orbit_uncertainty": "0",
          "minimum_orbit_intersection": ".202697",
          "jupiter_tisserand_invariant": "4.048",
          "epoch_osculation": "2457800.5",
          "eccentricity": ".3889800628971847",
          "semi_major_axis": "1.720520012229252",
          "inclination": "15.02606696200692",
          "ascending_node_longitude": "144.8173241683082",
          "orbital_period": "824.3051621591791",
          "perihelion_distance": "1.051272029656453",
          "perihelion_argument": "74.64055539736296",
          "aphelion_distance": "2.389767994802052",
          "perihelion_time": "2457881.692298597634",
          "mean_anomaly": "324.5407685928043",
          "mean_motion": ".4367314636936381",
          "equinox": "J2000"
        }
      }

Answer 1

您不能使用-不輸入字符串，而是將內部html設置為javascript對象而不是字符串

試試這個代替

var neoName = responseData.near_earth_objects["2017-03-15"][0].neo_reference_id;

如果要顯示整個對象，可以使用stringify()

var neoName = JSON.stringify(responseData.near_earth_objects["2017-03-15"][0]);

使用JavaScript使用JSON填充HTML

問題描述

1 個解決方案

解決方案1
1 2017-03-15 16:20:28

使用JavaScript使用JSON填充HTML

問題描述

1 個解決方案

解決方案1 1 2017-03-15 16:20:28

解決方案1
1 2017-03-15 16:20:28