试图迭代

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

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

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

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

Answer 2

是一个数组，你将它传递给nameList函数。

你必须在功能迭代以及

function nameList(name) { 

    var html = ''; 

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

    return html; 
} 

Answer 3

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

名称是一个数组，所以你需要遍历这不是你基本上是调用数组的toString方法，它是做什么的最好给你一个逗号分隔的内容列表（例如console.log(['a', 'b', 'c'].toString());或console.log('' + ['a', 'b', 'c']);）