Javascript 模板文本中JSON格式的动态API中的For数组循环_Javascript_Arrays_Json_Api_For Loop

Javascript 模板文本中JSON格式的动态API中的For数组循环

javascript arrays json api for-loop

Javascript 模板文本中JSON格式的动态API中的For数组循环,javascript,arrays,json,api,for-loop,Javascript,Arrays,Json,Api,For Loop,尝试使用尽可能多的普通Javascript来完成所有这些，而不需要React、Angular或其他任何东西。我正在通过JS文件呈现HTML内容。如何在模板文本（`）中执行for循环？我不能让一个循环工作，我需要它的实时数据显示。在JS文件中看到的代码中，我手动输入了一个0索引，以从阵列中获取第一个宇航员，它工作正常，显示良好这是我的JS文件 const apiData ={ url: 'http://api.open-notify.org/astros.json' } const {

尝试使用尽可能多的普通Javascript来完成所有这些，而不需要React、Angular或其他任何东西。我正在通过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
}

这是我的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=（数据）=>{
常量html=`
空间中的总人数：${data.number}

${data.people.map（x=>`Name:${x.Name}，Craft:${x.Craft}`）。加入（“”）
`
const-auditiv=document.querySelector（“.auditor”）
宇航员div.innerHTML=html
}
创建HTML（JSONDATA）

空间
如果设置元素的innerHTML
，它将清除以前的innerHTML
（例如其他元素）
要在div中添加多个元素，可以使用方法，如：

const
宇航员iv=document.querySelector（“.automotor”），
myData=simulateFetchAndParse（）；
insertNewHtml（myData）；
函数insertNewHtml（数据）{
//插入宇航员计数
const numberSpan=`空间中的总人数：${data.number}`；
宇航员iv.插入附件TML（“结束前”，数字span）；
//插入宇航员个人信息
for（让数据的人。人）{
const personDiv=`
姓名：${person.Name}
Craft:${person.Craft}
`;
宇航员IV.插入附件TML（“之前”，personDiv）；
}
}
函数simulateFetchAndParse（）{
常数数据={
编号：2，
人民:[
{名称：“Tasha Yar”，工艺：“企业”}，
{名称：“巴斯光年”，飞船：“无”}
]
};
返回数据；
}
宇航员{边距：1em 0 0 1em；填充：1em 0.5em 0.5em；边框：1px纯灰；}
.person{margin:1em 0；}
多个名称和工艺的预期显示结构是什么？尝试在每个新循环中自动创建多个div。每个宇航员+飞行器都有一个div。我编辑了我的答案，把每个宇航员+飞行器放在一个div中。注意，解释仍然可以用几种方式解释。最好用一个实际的html示例来编辑clarityBrilliant的问题！！谢谢你@JannesCarpentier。它工作得很好。你就是那个人。如果你在答案编辑器中点击，你可以在页面上剪下一个可运行的堆栈，我也喜欢这样。进一步解释如何使用createElement和appendChild？我会感兴趣的，太棒了。我也可以尝试一下这段代码，看看哪种解决方案效果更好。这就是编程的美妙之处，对吗？你可以用很多不同的方法做相似的事情D
<!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>