我如何从 Javascript 网站上的当天 api 的天文照片中获取随机图像

Question

我试图从 NASA 的每日天文照片 (APOD) 中获取当前图像但现在我试图在不使用日期的情况下随机获取图像可能吗？如果是那么怎么办？

这是代码

const fetchAPOD = async () => {
  try {
    const response = await fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
    const data = await response.json()
    displayData(data)
  } catch (error) {
    console.log(error)
  }
}

const displayData = data => {
  document.querySelector('.title').textContent = data.title
  document.querySelector('.date').textContent = data.date
  document.querySelector('.picture').src = data.url
  document.querySelector('.explanation').textContent = data.explanation
}

fetchAPOD()

工作正常

我想要的只是添加功能以从 API 随机获取图像

Answer 1

count A positive integer, no greater than 100. If this is specified then count randomly chosen images will be returned in a JSON array. Cannot be used in conjunction with date or start_date and end_date.

https://jsfiddle.net/mplungjan/pymfg2uv/

const imgDiv = document.getElementById("imageDiv");

fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=3`)
.then(response => response.json())
.then(data => {
  imgDiv.innerHTML = data.map(item => `<div>
 <h3 class="title">${item.title} <span class="date">${item.date}</span></h3>
 <img src="${item.url}" />
 <p>${item.explanation}</p></div>`).join('')

})

.date { font-size: xx-small; }

<div id="imageDiv"></div>

较旧的答案，其中包含一张来自某个日期范围的随机图像

const img = document.getElementById("apod");
let date, start = Date.parse('2021-01-01'), end = new Date();
end.setDate(end.getDate()-1);
const getDate = () => { 
  date = new Date(Math.floor(Math.random() * (end - start + 1) + start)).toISOString().split('T')[0]; 
  return date
};

fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&start_date=${getDate()}&end_date=${date}`)
.then(response => response.json())
.then(data => {
  img.src = data[0].url
})

<img id="apod" />

我如何从 Javascript 网站上的当天 api 的天文照片中获取随机图像

how can i fetch random images from Astronomy photo of the day api in Javascript website

html

javascript

fetch-api