I just came across a bit of trouble while working on a project for fun. Now, the main function for this project was just to show off a piece of space exploration news every day with an API Key. The text works fine, but I can't figure out how to place in the correct image for each day.
I have tried calling it with XMLHttp requests, as well as using strings to display the data externally.
I feel like I am missing something obvious.
The current JSon is here, and it is the HDURL that I want to continuously call for each time it updates, so that the viewer is not stuck with one image:
{"copyright":"Devin Boggs","date":"2019-05-11","explanation":"The Milky Way doesn't look quite this colorful and bright to the eye, but a rocket launch does. So a separate deep exposure with a sensitive digital camera was used in this composite skyscape to bring out our galaxy's central crowded starfields and cosmic dust clouds. In the scene from Merritt Island National Wildlife Refuge, a nine minute long exposure begun about 20 minutes after the Miky Way image recorded a rocket launch and landing. The Falcon 9 rocket, named for the Millennium Falcon of Star Wars fame, appropriately launched a Dragon resupply ship to the International Space Station in the early morning hours of May the 4th. The plume and flare at the peak of the launch arc mark the rocket's first stage boost back burn. Two shorter diagonal streaks are the rocket engines bringing the Falcon 9 stage back to an offshore landing on autonomous drone ship Of course I Still Love You.","hdurl":"https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs.jpg","media_type":"image","service_version":"v1","title":"Milky Way, Launch, and Landing","url":"https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs1024.jpg"}
The JS is here:
var header = document.querySelector("header");
var image = document.querySelector("images");
var section = document.querySelector("info");
var div = document.querySelector("misc");
var requestURL = "https://api.nasa.gov/planetary/apod?api_key=yoCLrO1qrJoLzGQx3yNNL2OWgey7e7s7aTEGj5PK";
var request = new XMLHttpRequest();
request.open("GET", requestURL);
request.responseType = "json";
request.send();
request.onload = function() {
var loveSpace = request.response;
populateHeader(loveSpace);
showKnowledge(loveSpace);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement("h1");
myH1.textContent = jsonObj["title"] + ' \n(Retrieved on:) ' + jsonObj["date"];
header.appendChild(myH1);
var myPara = document.createElement("h2");
myPara.textContent = "Story: " + '\n' + jsonObj["explanation"];
header.appendChild(myPara);
var myMisc = document.createElement("p");
myMisc.textContent = "Follow APOD on: Instagram, Facebook, Reddit, or Twitter." + ' ' + "Service Version: " + jsonObj["service_version"];
header.appendChild(myMisc);
}
And the HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final</title>
<style>
</style>
</head>
<body>
<header>
</br>
</header>
<image src="https://apod.nasa.gov/apod/image/1905/crs17spaceXboggs.jpg">
</br>
</section>
</br>
<section id="info">
</section>
</br>
<section id="misc">
</section>
</br>
<script src="space.js">
</script>
</body>
</html>
My expected result was for all the data to show, not just the textual info.
Any and all ideas are appreciated. Thank you for your assistance!
Some corrections in HTML and JS. Try this and say me if it is what you epected
var header = document.querySelector("header");
var image = document.querySelector("section#img");
var section = document.querySelector("info");
var div = document.querySelector("misc");
var requestURL = "https://api.nasa.gov/planetary/apod?api_key=yoCLrO1qrJoLzGQx3yNNL2OWgey7e7s7aTEGj5PK";
var request = new XMLHttpRequest();
request.open("GET", requestURL);
request.responseType = "json";
request.send();
request.onload = function() {
var loveSpace = request.response;
populateHeader(loveSpace);
otherData(loveSpace);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement("h1");
myH1.textContent = jsonObj["title"] + ' \n(Retrieved on:) ' + jsonObj["date"];
header.appendChild(myH1);
var myPara = document.createElement("h2");
myPara.textContent = "Story: " + '\n' + jsonObj["explanation"];
header.appendChild(myPara);
var myMisc = document.createElement("p");
myMisc.textContent = "Follow APOD on: Instagram, Facebook, Reddit, or Twitter." + ' ' + "Service Version: " + jsonObj["service_version"];
header.appendChild(myMisc);
}
function otherData(jsonObj) {
var myImg = document.createElement("img");
myImg.src = jsonObj["hdurl"];
image.appendChild(myImg);
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final</title>
<style>
</style>
</head>
<body>
<header>
<br />
</header>
<section id="img"></section>
<br />
<section id="info"></section>
<br />
<section id="misc"></section>
<br />
<script src="space.js"></script>
</body>
</html>
The correct tag for image is <img src="url" /> and not <image src="url" />.
Try to correct and you will see image too.