[英]Populate HTML with JSON using JavaScript
Having a bit of trouble. 有点麻烦。 The goal is to populate an HTML page with JSON data that has been requested in JavaScript. 目的是使用JavaScript中已请求的JSON数据填充HTML页面。 I have successfully displayed the http request code and status in the document. 我已经在文档中成功显示了http请求代码和状态。 However, I am unable to successfully display data that is in the JSON. 但是,我无法成功显示JSON中的数据。 I'm not sure if line 7 of the JS is correct because I made it from an example. 我不确定JS的第7行是否正确,因为我是从一个示例中得出的。 Also in the JS, line 13, is the line that I cannot get working. 同样在JS的第13行中,我无法正常工作。 (I would like ONLY to use JavaScript and HTML - no AJAX, JQUERY, etc.) Any suggestions would be helpful, I haven't found anything on this site so far that is similar to my issue. (我只想使用JavaScript和HTML-不能使用AJAX,JQUERY等。)任何建议都将有所帮助,到目前为止,我在该网站上没有发现任何与我的问题类似的东西。
BELOW IS THE HTML 下面是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>
BELOW IS THE JS 下面是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;
}
BELOW IS THE JSON (from placing call in address bar) 下面是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"
}
}
you cannot use - without being in a string AND you're setting the inner html to a javascript object not a string 您不能使用-不输入字符串,而是将内部html设置为javascript对象而不是字符串
try this instead 试试这个代替
var neoName = responseData.near_earth_objects["2017-03-15"][0].neo_reference_id;
if you want to display the whole object you could use stringify()
如果要显示整个对象,可以使用stringify()
var neoName = JSON.stringify(responseData.near_earth_objects["2017-03-15"][0]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.