Javascript 如何显示不同的json流派名称（以及每个流派类型的总数）？_Javascript_Jquery_Json_Distinct

Javascript 如何显示不同的json流派名称（以及每个流派类型的总数）？

javascript jquery json

Javascript 如何显示不同的json流派名称（以及每个流派类型的总数）？,javascript,jquery,json,distinct,Javascript,Jquery,Json,Distinct,我有这样的JSON数据结构 { "resp": [{ "genreID": 1, "genre": "All TV Series", "length": "3.5", "name": "Passion", "vid": 12345, }, { "genreID": 1, "genre": "All TV Series", "length": "1.9"

我有这样的JSON数据结构

{
    "resp": [{
        "genreID": 1,
        "genre": "All TV Series",
        "length": "3.5",
        "name": "Passion",
        "vid": 12345,

    }, {
        "genreID": 1,
        "genre": "All TV Series",
        "length": "1.9",
        "name": "Galaxy",
        "vid": 12346,


    }, {
        "genreID": 1,
        "genre": "All TV Series",
        "length": "1.4",
        "name": "Sun",
        "vid": 12347,


    }, {
        "genreID": 8,
        "genre": "Thriller",
        "length": "15.1",
        "name": "Moonlight ",
        "vid": 12348,


    }, {
        "genreID": 8,
        "genre": "Thriller",
        "length": "10.6",
        "name": "Sunlight",
        "vid": 12349,


    }]
}

我想从上面的json数据创建以下超链接，一旦我们点击每个流派名称超链接，它应该只显示该流派的数据。现在，我的代码使用下面的代码在列表中显示整个json

要创建以下超链接：

All TV Series(3)
Thriller(2)

如何使用Javascript/jQuery实现这一点？很遗憾，我无法编辑服务器发送给我的内容

代码：

试着跟随

var obj={ 响应：[{ 根里德：1，类型：所有电视连续剧，长度：3.5，名称：激情，视频：12345， }, { 根里德：1，类型：所有电视连续剧，长度：1.9，名称：银河，视频：12346， }, { 根里德：1，类型：所有电视连续剧，长度：1.4，姓名：孙，视频：12347， }, { genreID:8，类型：惊悚片，长度：15.1，名称：月光，视频：12348， }, { genreID:8，类型：惊悚片，长度：10.6，名称：阳光，视频：12349， }] }; var响应={}；对象对应的forEachfunctionitem{ 响应[项目.流派]=响应[项目.流派]| 0；响应[项目类型]++； };

console.logresponse 假设返回的数据驻留在一个名为data的变量中

然后进行另一次迭代以生成链接：

es6 es5

谢谢你的回复。我曾尝试在ajax中使用您的代码，但我不断发现错误；之前，让data2=data.resp！如何修复它？我仍然得到这个==>错误丢失；before语句let model={}；这很奇怪，因为它不应该出错。我已经做了一个小的编辑，请再次检查@user1788736我已经更新了代码，这样您就可以享受这两个功能了，现在您将获得正确的输出。因为它偏离了原始问题-我将我们转移到单独的聊天室。如果有帮助，请批准答案。如何将这些值打印为超链接标题？

success: function(data) {

   self.itemParts = data.resp;

    for (var i = 0; i < self.itemParts.length; i++) 
    {


       // create HTML code
       var div = "<div class=\"image\">\n" + 
       "<a href=\"javascript:loadList('" + self.itemParts[i].vid+ "')\">\n" +
       "<img src=\"http://somesite.com/images/l"+ self.itemParts[i].vid +".png\" alt=\"..\" />"+ self.itemParts[i].name+"\n" +
       "</a>\n" +
       "</div>\n";
       // append it inside <body> tag.
       $("#myDiv").append(div);

    }


<div id='myDiv' style="display: visiable;">  

</div>

let data = {
    "resp": [{
        "genreID": 1,
        "genre": "All TV Series",
        "length": "3.5",
        "name": "Passion",
        "vid": 12345,

    }, {
        "genreID": 1,
        "genre": "All TV Series",
        "length": "1.9",
        "name": "Galaxy",
        "vid": 12346,


    }, {
        "genreID": 1,
        "genre": "All TV Series",
        "length": "1.4",
        "name": "Sun",
        "vid": 12347,


    }, {
        "genreID": 8,
        "genre": "Thriller",
        "length": "15.1",
        "name": "Moonlight ",
        "vid": 12348,


    }, {
        "genreID": 8,
        "genre": "Thriller",
        "length": "10.6",
        "name": "Sunlight",
        "vid": 12349,


    }]
};

let model = {};
let values = data.resp;
values.forEach(function(value) {
  //creating separate groups for each type
  model[value.genre] = model[value.genre] || [];
  model[value.genre].push(value);
});

for(let genre in model) {
  $("#myDiv").append(`<a href="#">${genre}(${model[genre].length})</a>`); 
}

for(let genre in model) {
  $("#myDiv").append('<a href="#">'+genre+'('+model[genre].length+')</a>'); 
}