試圖迭代

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']);）