Как связать изображение с обновлением ключевых данных JSON / API и отобразить его на веб-странице HTML - PullRequest
Новая
       4

Как связать изображение с обновлением ключевых данных JSON / API и отобразить его на веб-странице HTML

0 голосов
/ 11 мая 2019

Я только что столкнулся с небольшим количеством проблем, работая над проектом для развлечения.Теперь основная функция этого проекта состояла в том, чтобы каждый день демонстрировать новости об освоении космоса с помощью API-ключа.Текст работает нормально, но я не могу понять, как разместить правильное изображение на каждый день.

Я попытался вызвать его с помощью запросов XMLHttp, а также использовать строки для внешнего отображения данных.

Я чувствую, что упускаю что-то очевидное.

Текущий JSon уже здесь, и это HDURL, который я хочу непрерывно вызывать при каждом обновлении, чтобы зритель не застрялс одним изображением: 

{"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"}

JS здесь: 

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

И 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>

Мой ожидаемый результат был для всех данных, чтобы показать, а не только текстовая информация.

Любые идеи приветствуются.Спасибо за вашу помощь!

1 Ответ

1 голос
/ 11 мая 2019

обновление

Некоторые исправления в HTML и JS.Попробуйте это и скажите мне, если это то, что вы ожидали 

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>

старый ответ

Правильный тег для изображения <img src="url" />, а не <image src="url" />.

Попробуйте исправить, и вы тоже увидите изображение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...