javascript：在列视图中显示嵌套数组

我正在尝试创建一个简单的列视图，它允许我浏览嵌套数组。目标是让用户单击“名称”列中的“名称”，并在下一列中显示相应的电影列表。例如，我将提供一个JSON数组，如下所示：

var array = [
    {
        "name":"sean connery",
        "index":0,
        "movies": [
            {"name": "Goldfinger",
             "id": 43},
            {"name":"Thunderball",
             "id":103}
            ]
    },{
      "name":"pierce brosnan",
        "index":1,
        "movies": [
            {"name": "Goldeneye",
             "id": 22},
            {"name":"The world is not enough",
             "id":100}
            ]  

    }
    ] 

基本上，为了检索对应名称的电影数组，我有点作弊。我读取附加到li元素的'index'属性，并使用该属性选择适当的索引来检索movies数组

// sorts alphabetically 
array.sort(function(a, b) {
    return b.name < a.name ? 1 : b.name > a.name ? -1 : 0;
});

$.each(array, function(index, value){
   listitem = document.createElement('li');
$(listitem).html(value.name).appendTo($("ul#list")).attr("data-id",value.index);        
});

//make it a scrollbox
$("ul#list").scrollTop(); 

//click to display movies
$("ul#list li").click(function(){
 var id = $(this).attr("data-id"); 
movies = array[id].movies;
    console.log(movies); 
});​

//按字母顺序排序
array.sort（函数（a，b）{
返回b.namea.name？-1:0；
});
$.each（数组、函数（索引、值）{
listitem=document.createElement（'li'）；
$（listitem）.html（value.name）.appendTo（$（ul#list））.attr（“数据id”，value.index）；
});
//让它成为一个滚动框
$（“ul#list”）.scrollTop（）；
//单击以显示电影
$（“ul#list li”）。单击（函数（）{
var id=$（this.attr（“数据id”）；
movies=数组[id]。movies；
console.log（电影）；
});​

但这似乎不是理想的方法。似乎应该有一种方法可以在不改变DOM的情况下检索适当的movies数组。有什么建议吗？还是说我做的是合法的

---

谢谢！还有一把包含我的代码的小提琴：

您可以更进一步，使用以下方法将整个电影阵列连接到

：

如果需要，您还可以缓存

$（'ul#list li'）

：

var $lis = $('ul#list li');
$lis.click(function() {
    var i = $lis.index(this);
    console.log(array[i].movies);
});

演示：

---

当然，你走哪条路取决于你的具体情况。

索引

方法确实需要您的

精确匹配

数组

，这可能是个问题，使用数据属性可以很好地避免这个问题，通过直接通过

数据电影

或间接通过

数据id

中的索引将每个

直接绑定到一组电影，我不太确定您想要实现什么。你想在不访问数据id字段的情况下检索电影吗？@georgephillips see mu下面的回答太短了，无法理解我想要实现的目标。这是一个非常彻底的回答。我不知道jQuery中存在.data（）属性，这似乎完全符合我的需要。第二个选择似乎也很好——再一次，这是我从未考虑过的。谢谢你的帮助@便当：

data（）。
$.each(array, function(index, value) {
    var $li = $('<li>').html(value.name)
    $('ul#list').append($li);
});

$("ul#list li").click(function() {
    var i = $('ul#list li').index(this);
    console.log(array[i].movies);
});​

var $lis = $('ul#list li');
$lis.click(function() {
    var i = $lis.index(this);
    console.log(array[i].movies);
});