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

Question

I have a JSON file with objects that have their own titles and other characteristics. I'd like to use this data and append them as boxed elements in a page.

I haven't figured out how to use a dynamic number of blocks of data (depending on the JSON file).

Any suggestions?

Answer 1

today is a great day to learn about loops. since you didn't give us any code, i'll make an example that will answer (in general) how to do this.

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

since you didn't give an object (JSON) i made one up, but you can use this rough outline to style your own script around your data. However many name objects are in this object, thats how many times the code will run. so you could have 2, or 100, and each one will become its own box when the loop appends the element and the text to the document.

hope this helps