使用 JSON 文件动态更新 HTML 内容? [英] Dynamically update HTML content using JSON file?

问题描述

我想创建一个 JS 循环(使用 jQuery)，它会根据 <div> id 是否与 JSON 匹配来查看 JSON 文件并将适当的内容添加到 HTML 文件中"id"值.无论添加了多少

框，这都需要易于扩展和工作.

<小时>

我有一个 HTML 文件设置如下:

 
<h1></h1><小时/><p></p>
<div class="box" id="2"><h1></h1><小时/><p></p>

<div class="box" id="3"><h1></h1><小时/><p></p>

还有一个单独的 JSON 文件，其中包含每个框元素的值:

<代码>{内容": [{身份证":1，"header": "框 1","para": "这是方框 1","other": "另一个不一定用于所有框的键"},{身份证":2，"header": "框 2","para": "这是方框 2"},{身份证":3，"header": "框 3","para": "这是方框 3","other": "另一个不一定用于所有框的键"}]}

基本上这是我正在寻找的结果(添加了一些基本的 CSS 样式)，使用以下脚本创建，但显然每次创建新 <div> 时都必须更改此代码code> 已添加，因此不可扩展:

$.getJSON('content.json', function (data) {严格使用"；var content = data.content;$('#1 h1').html(content[0].header);$('#2 h1').html(content[1].header);$('#3 h1').html(content[2].header);$('#1 p').html(content[0].para);$('#2 p').html(content[1].para);$('#3 p').html(content[2].para);});

详细的答案将不胜感激，因为我对 JS 和 JSON 还很陌生，还没有找到任何能准确解释我想要实现的目标的答案.

谢谢！:)

解决方案

你想要使用的是一个 forEach 循环，这样你就不必关心你的 json-file 的长度内容数组是:

$.getJSON('content.json', function (data) {严格使用"；var content = data.content;content.forEach(e => {$("#"+e.id+" h1").html(e.header)$("#"+e.id+" p").html(e.para)});});

这是一个有效的小提琴:https://jsfiddle.net/qsrehpa2/1/

I want to create a JS loop (using jQuery) that looks through the JSON file and adds the appropriate content to the HTML file, based on whether the <div> ids match the JSON "id" values. This needs to be easily scalable and work regardless of how many <div> boxes are added.

---

I have a HTML file set up as follows:

    <div class="box" id="1">
        <h1></h1>
        <hr/>
        <p></p>
    </div>
    <div class="box" id="2">
        <h1></h1>
        <hr/>
        <p></p>
    </div>
    <div class="box" id="3">
        <h1></h1>
        <hr/>
        <p></p>
    </div>

And a seperate JSON file with the values for each box element:

{
    "content": [
        {
            "id": 1,
            "header": "Box 1",
            "para": "This is Box 1",
            "other": "Another key that's not necessarily used for all boxes"
        },
        {
            "id": 2,
            "header": "Box 2",
            "para": "This is Box 2"
        },
        {
            "id": 3,
            "header": "Box 3",
            "para": "This is Box 3",
            "other": "Another key that's not necessarily used for all boxes"
        }
    ]
}

Essentially this is the result I'm looking for (with some basic CSS styling added), created using the following script, though obviously this code would have to be changed each time a new <div> is added, so isn't scalable:

$.getJSON('content.json', function (data) {

     "use strict";

     var content = data.content;

     $('#1 h1').html(content[0].header);
     $('#2 h1').html(content[1].header);
     $('#3 h1').html(content[2].header);

     $('#1 p').html(content[0].para);
     $('#2 p').html(content[1].para);
     $('#3 p').html(content[2].para);

});

Detailed answers would be appreciated, as I'm still fairly new to JS and JSON and haven't found any that exactly explain what I'm trying to achieve.

Thanks! :)

解决方案

What you want to use is a forEach loop, that way you don't have to care about how long your json-file's content array is:

$.getJSON('content.json', function (data) {

     "use strict";

     var content = data.content;
     content.forEach(e => {
        $("#"+e.id+" h1").html(e.header)
        $("#"+e.id+" p").html(e.para)
     });
});

Here is a working fiddle: https://jsfiddle.net/qsrehpa2/1/

这篇关于使用 JSON 文件动态更新 HTML 内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！