尝试在不需要 React、Angular 或其他任何东西的情况下使用尽可能多的普通 Javascript 来完成所有这些工作。我正在通过我的 JS 文件呈现 HTML 内容。如何在模板文字 (`) 中执行 for 循环？我无法让循环工作，我需要它来显示实时数据。使用您在 JS 文件中看到的代码，我手动放入 0 索引以从数组中获取第一个宇航员，它可以正常工作并显示。
这是我的 JS 文件。
const apiData ={
url: 'http://api.open-notify.org/astros.json'
}
const {url} = apiData
const apiUrl = `${url}`
fetch(apiUrl)
.then( (data) => data.json() )
.then ( (astronauts) => createHtml(astronauts) )
const createHtml = (data) => {
console.log(data)
const html = `
<div>
Total People In Space: ${data.number} <br>
Names: ${data.people[0].name} <br>
Craft: ${data.people[0].craft}
</div>
`
const astronautDiv = document.querySelector('.astronaut')
astronautDiv.innerHTML = html
}
这是来自 API 的 JSON 格式的最新内容。
{"number": 3, "people": [{"craft": "ISS", "name": "Chris Cassidy"}, {"craft": "ISS", "name": "Anatoly Ivanishin"}, {"craft": "ISS", "name": "Ivan Vagner"}], "message": "success"}
这是我的 HTML 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space</title>
<link rel="stylesheet" href="static/css/styles.css">
<script src="static/js/main.js"></script>
</head>
<body>
<div class="astronaut"></div>
</body>
</html>
最佳答案
使用 .map 和 .join，我们可以在模板文字中构造一个字符串
const JSONDATA = {"number": 3, "people": [{"craft": "ISS", "name": "Chris Cassidy"}, {"craft": "ISS", "name": "Anatoly Ivanishin"}, {"craft": "ISS", "name": "Ivan Vagner"}], "message": "success"}
const createHtml = (data) => {
const html = `
<div>
Total People In Space: ${data.number} <br>
${data.people.map(x => `<div>Name: ${x.name}, Craft: ${x.craft}</div>`).join("")}
</div>
`
const astronautDiv = document.querySelector('.astronaut')
astronautDiv.innerHTML = html
}
createHtml(JSONDATA);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space</title>
<link rel="stylesheet" href="static/css/styles.css">
<script src="static/js/main.js"></script>
</head>
<body>
<div class="astronaut"></div>
</body>
</html>关于javascript - For Loop on array from dynamic API in JSON format within template literals，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63221852/