使用 html 和 javascript 显示 json 文件中的多个数据“块”

Question

我有一个 JSON 文件，其中的对象具有自己的标题和其他特征。 我想将这些数据和 append 用作页面中的盒装元素。

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

有什么建议么？

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

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

希望这可以帮助