返回与链接中的文本匹配的 JSON 节点 onclick

Question

下面的 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);   
}

Answer 1

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

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

再一次，如果您有任何问题，请告诉我。

Answer 2

只需使用 $.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});
})