使用JavaScript填充HTML和JSON

有點麻煩。目標是使用JavaScript中請求的JSON數據填充HTML頁面。我已成功顯示文檔中的http請求代碼和狀態。但是，我無法成功顯示JSON中的數據。我不確定JS的第7行是否正確，因爲我是通過一個示例創建的。同樣在JS第13行中，我不能工作。（我只想使用JavaScript和HTML - 無AJAX，JQUERY等）任何建議都會有所幫助，至今我在這個網站上還沒有發現任何與我的問題類似的內容。使用JavaScript填充HTML和JSON

下面是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" 
     } 
     }

來源

2017-03-15 N.Thompson

嘗試：'responseData.near_earth_objects [ '2017年3月15日'] [0 ];'而是。我不相信你可以在該鍵上使用點符號。 –

不能使用 - 無在一個字符串而你正在設置一個javascript對象的內部html而不是一個字符串

試試這個，而不是

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

來源

2017-03-15 16:20:28 stackoverfloweth

使用JavaScript填充HTML和JSON

回答

相關問題