0

下面的 JS 在解析 JSON 后为我返回一个电影标题列表。每个电影标题节点都有更多尚未显示的属性和值。当用户单击列表中的电影标题时，我希望它返回该节点中与该标题匹配的其他值。我该怎么做呢？谢谢。

我发布了一个数据示例。JS 创建所有电影标题的 HTML 列表。如您所见，同一电影标题有多个节点，但“位置”不同。我希望能够单击列表中的电影标题并让它在 HTML 中显示特定电影标题的所有不同位置。

这是它现在正在做的事情的 JS 小提琴。JSfiddle

JSON数据：

    fl({
  "nodes" : [
{
  "node" : {
    "title" : "180",
    "ReleaseYear" : "2013",
    "Director" : "Jayendra",
    "Writer" : "Umarji Anuradha, Jayendra, Aarthi Sriram, & Suba ",
    "Address" : "\n \n \n 555 Market St. \n San Francisco, CA\n United States\n \n \n See map: Google Maps \n \n",
    "Actor 1" : "Siddarth",
    "Actor 2" : "Nithya Menon",
    "Actor 3" : "Priya Anand",
    "Latitude" : "37.789952",
    "Longitude" : "-122.400158"
  }
},
{
  "node" : {
    "title" : "180",
    "ReleaseYear" : "2013",
    "Director" : "Jayendra",
    "Writer" : "Umarji Anuradha, Jayendra, Aarthi Sriram, & Suba ",
    "Address" : "\n \n \n Epic Roasthouse (399 Embarcadero) \n San Francisco, CA\n United States\n \n \n See map: Google Maps \n \n",
    "Actor 1" : "Siddarth",
    "Actor 2" : "Nithya Menon",
    "Actor 3" : "Priya Anand",
    "Latitude" : "37.797677",
    "Longitude" : "-122.394339"
  }
},
{
  "node" : {
    "title" : "180",
    "ReleaseYear" : "2013",
    "Director" : "Jayendra",
    "Writer" : "Umarji Anuradha, Jayendra, Aarthi Sriram, & Suba ",
    "Address" : "\n \n \n Mason & California Streets (Nob Hill) \n San Francisco, CA\n United States\n \n \n See map: Google Maps \n \n",
    "Actor 1" : "Siddarth",
    "Actor 2" : "Nithya Menon",
    "Actor 3" : "Priya Anand",
    "Latitude" : "37.791556",
    "Longitude" : "-122.410766"
  }
}
  ]
})

JAVASCRIPT：

    var sort_by = function(field, reverse, primer){
    var key = function(x) {return primer ? primer(x[field]) : x[field]};
    return function(a,b) {
        var A = key(a), B = key(b);
        return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];
    }
}

$.ajax({
    type: 'GET',
    url: 'list',
    async: false,
    jsonpCallback: 'fl',
    contentType: 'application/json',
    dataType: 'jsonp',
    success: function(data) {
        var tmp = [];
        for(var i=0;i<data.nodes.length;i++) {
            tmp.push(data.nodes[i].node);
        }
        tmp.sort(sort_by('title', true));
        var div = document.createElement('div');
        $('#film').append(div);
        $(div).attr( 'data-role', 'collapsible' );
        var heading = tmp[0]['title'][0];
        var h3 = document.createElement('h3');
        h3.innerHTML = heading;
        $(div).append(h3);
        h3=null;
        var title = '';
        for(var i=0;i<tmp.length;i++) {
            if(tmp[i]['title'] != title){ title=tmp[i]['title'];
                if(tmp[i]['title'][0] !== heading){
                    heading = tmp[i]['title'][0];
                    var div = document.createElement('div');
                    $('#film').append(div);
                    $(div).attr( 'data-role', 'collapsible' );
                    var h3 = document.createElement('h3');
                    h3.innerHTML = heading; 
                    $(div).append(h3);
                    h3=null;
                    var p = document.createElement('p');
                    $(div).append(p);
                }
                var film = "<a>"+tmp[i]['title']+"</a> <br />";
                $(p).append(film);
                film=null;
                //$("#sf_film").collapsibleset();
                $("#film").collapsibleset("refresh");
            }
        }
    }
});

function fl(json){
     console.log(json);   
}
4

2 回答 2

1

我过去这样做的方法是将对象数组从 json 加载到单个数组对象中，然后使用数组索引从中检索数据。我的jsfiddle显示了一个假 ajax 请求的示例，该请求然后将其加载到一个数组中，显示仅包含标题的链接，并在您单击链接时displayLinks()显示更多详细信息。showCast(movieId)如果您有任何问题，请告诉我。

更新 1： 我创建了一个更新的小提琴，按标题合并它们。在第一个小提琴简单分配data给 的地方movies，这个使用了一个额外的数组movieTitles来保存唯一的电影标题，并使用一个循环。循环遍历每个data元素，检查该.title值是否已存在于movieTitles. 如果它确实存在，我们使用索引来访问该电影，在movies那里您可以根据需要连接您的其他属性。如果它不存在（movieIndex为 -1），那么我们将电影添加到movies并将电影标题添加到movieTitles。然后循环直到数据中的所有元素都已分配。
我的示例没有检查不同的大写字母（因此蝙蝠侠和蝙蝠侠将分别显示），但这很容易，我不想破坏乐趣并为您完成所有工作:)

再次，让我知道您是否有任何问题。

于 2013-04-09T01:47:40.453 回答
-1

只需使用 $.parseJSON 解析 JSON 字符串数据。这会将字符串解析为 JS 对象。

如果您的 JSON 字符串具有以下结构：

movies: {
    drama: [{ //An array of movies
        movieId: {
            title: 'title',
            rating: '',
            duration: ''
        }]
    },
    terror: [{ //An array of movies
        movieId: {
            title: 'title',
            rating: '',
            duration: ''
        }
    }]
}

然后在点击处理程序中，您可以访问相应的对象。

$(movie).on('click', function(){
    movieId = this.id;
    //Get the movie info from JSON parsed obj
    movieObj = movies.drama.movieId;
    // Append info to the DOM element
    $('list').append(movieObj.{attributeId});
})
于 2013-04-09T01:38:08.020 回答