使用 html 和 javascript 显示来自 json 文件的多个“块”数据答案

【问题标题】：Display multiple "blocks" of data from json file using html and javascript使用 html 和 javascript 显示来自 json 文件的多个“块”数据
【发布时间】：2019-10-16 03:02:32
【问题描述】：

我有一个 JSON 文件，其中包含具有自己的标题和其他特征的对象。我想使用这些数据并将它们作为装箱元素附加到页面中。

我还没有弄清楚如何使用动态数量的数据块（取决于 JSON 文件）。

有什么建议吗？

【问题讨论】：

你试过length吗？
你已经尝试过什么？我建议使用for...of 循环遍历对象中的每个值以将它们包装在一个盒子中
你能准确解释一下你有什么作为输入和你想要什么作为 html 输出（最小版本）吗？
我有包含课程的 JSON 文件。每门课程都有一个标题和说明。此列表可能会不时更改。我如何能够获取这些数据并将它们显示在网站中，并且具有漂亮的样式？

标签： javascript html css json

【解决方案1】：

今天是学习循环的好日子。因为你没有给我们任何代码，我会做一个例子来回答（一般）如何做到这一点。

<div id="demo">

</div>

<style>
    p {
        border: 2px solid black;
        width: 20%;
    }
</style>


<script>
 let object = {
     person1: {
         name: "bob",
         age: 30
     },
     person2: {
         name: "sherry",
         age: 35
     }
 }

let array = Object.keys(object);

Object.keys(object).forEach(function(key) {
    let name = object[key].name;
    let age = object[key].age;

    let p = document.createElement("P");
    let text = document.createTextNode(`name: ${name}, age: ${age}`);

    p.appendChild(text);
    document.getElementById("demo").appendChild(p);
});
</script>

因为您没有提供对象 (JSON)，所以我编了一个，但是您可以使用这个粗略的大纲来围绕您的数据设置自己的脚本样式。不管这个对象中有多少名称对象，这就是代码将运行的次数。所以你可以有 2 个或 100 个，当循环将元素和文本附加到文档时，每个都将成为自己的框。

希望对你有帮助

【讨论】：

没问题，如果它解决了你的问题，别忘了将答案标记为正确答案。欢呼