在循环中使用 JSON 数据填充 <p> 标签

Question

我正在尝试定位 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>

Answer 1

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

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

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

如果索引不相同，则说明所提供的详细信息不足

Answer 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]);
}

Answer 3

最好动态生成这些元素，因为 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>

在循环中使用 JSON 数据填充 <p> 标签

Populate <p> tags with JSON data for in loop

javascript

each

jquery

json

for-in-loop