在循环中使用 JSON 数据填充 <p> 标记答案

【问题标题】：Populate <p> tags with JSON data for in loop在循环中使用 JSON 数据填充 <p> 标记
【发布时间】：2017-06-24 00:16:11
【问题描述】：

我正在尝试以 18 个 $('.char-names') 元素为目标，并使用本地 JSON 文件中的名称动态填充。 3 个控制台日志显示 18 个不同的 id、charName、ingName，因此数据正在链接。它只是在每个插槽中使用相同的名称填充 $('.char-names') 。我在这里拔头发。

$.getJSON('people.json', function(data) {
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        console.log(id);
        console.log(charName);
        console.log(imgName);

        $('.char-names').text(charName);
    }
});

HTML...

<div class="faces-container">
    <img src="img/face1.jpg" class="faces">
    <p class="char-names"></p>
</div>

【问题讨论】：

我的意思是...$('.char-names')选择所有 .char-names元素，.text(charName);将所有选择元素的文本内容更新为charName 的值。它正在按照您告诉它的方式执行...也许您应该根据索引过滤到特定的 .char-names 元素？
为什么不动态生成<p>s（或整个<div>s）？如果您在 JSON 中有太多或太少的条目，这将是灵活的！

标签： javascript jquery json each for-in-loop

【解决方案1】：

最好动态生成这些元素，因为 JSON 对象的条目可以是任意长度。所以你的 JS 应该是：

$.getJSON('people.json', function(data) {
    // the container
    $container = $('#container');
    // $container.empty(); // if you want to empty it first
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;

        var $name = $('<p>' + charName + '</p>').addClass('faces');
        var $img = $('<img src="' + imgName + '"/>').addClass('char-names');
        var $div = $('<div></div>').append($img)
                                   .append($name)
                                   .addClass('faces-container');
        $container.append($div);
    }
});

您的 HTML 应该有一个空元素（将动态填充）：

<div id='container'></div>

【讨论】：

【解决方案2】：

也许是这样的。我没有测试过

$.getJSON('people.json', function(data) {
    var charNamesArray = [];
    for (var i in data) {
        var charName = data[i].name;
        var imgName = data[i].image;
        var id = data[i].id;
        charNamesArray.push(charName);
    }
});

var charNames = document.getElementsByClassName('char-names');
for(var i = 0;i < charNamesArray.length;i++){
    charNames[i].innerHTML(charNamesArray[i]);
}

【讨论】：

$.getJSON 是异步的ajax。您无法在收到数据之前对其进行处理

【解决方案3】：

对于初学者，不要在数组上使用for in。

如果$('.char-names')元素的索引与数组数据相同，则可以使用它们的索引

$.getJSON('people.json', function(data) {
    var $charNames =  $('.char-names');
    $.each(data, function(i, obj){
          $charNames.eq(i).text(obj.name);
    });
});

如果索引不同，则没有提供足够的详细信息

【讨论】：