javascript - 尝试迭代

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