Question

我试图遍历JSON对象并将数组中的每个项目包装在li标记中。

这是我的JSON结构

 var classYear = {
    "1921": [
        'name1', 'name2', 'name3', 'name4'
    ],
    "1933": [
        'name5', 'name6', 'name7', 'name8'
    ],
   "1943": [
        'name9', 'name10', 'name11', 'name12', 'name13'
    ]
};

这是我的javascript

var container = document.getElementById('classYearContainer');

function classYearOutput(yClass, yId, listId, key, name) {
    return '<div class="'+ yClass +'" id="'+ yId +'">' + 
        '<h4>' + key + '</h4>' +
        '<ul id="'+ listId +'">' + name + '</ul>' +
        '</div>';
}

function nameList(name) {
  return '<li>' + name + '</li>';
}

for(var year in classYear) {
     container.innerHTML += classYearOutput(
        'category',
          'y-' + year,
         year + '-list',
         year,
            nameList(classYear[year])
  );
}

使用此设置，我的输出将返回一个li中的所有名称，而不是单独的li标记。奇怪的是，当我console.log时，我得到了预期的结果，但是当我return时，它会将所有名称放在同一个li中。

感谢您的帮助。

Answer 1

classYear[year]是一个数组，您将它传递给nameList函数。

您还必须迭代该功能

function nameList(name) {

    var html = '';

    for (var i=0; i<name.length; i++) {
        html += '<li>' + name[i] + '</li>';
    }

    return html;
}

Answer 2

function nameList(names) {
    return names.map(function(name) {
        return '<li>' + name + '</li>';
    });
}

Names是一个数组，所以你需要迭代它而不是你本质上调用数组的toString方法，它正在做最好的并给你一个逗号分隔的内容列表（例如{{1 }或console.log(['a', 'b', 'c'].toString());）

Answer 3

问题是您将数组传递到名称列表中，您需要遍历数组并为每个名称创建一个li。

function nameList(names) {
    var out = "";
    names.forEach(function (el) {out += "<li>" + el + "</li>";});
    return out;
}

小提琴：http://jsfiddle.net/noy3dshx/

试图迭代

3 个答案: