Question

我的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实现这一目标？不幸的是我无法编辑服务器发送给我的内容。

代码：

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>

Answer 1

假设返回的数据位于名为data

的变量中

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);
});

然后再做一次迭代来生成链接：

ES6

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

ES5

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

Answer 2

尝试以下

var obj = {
  "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,


  }]
};

var response = {};

obj.resp.forEach(function(item) {
  response[item.genre] = response[item.genre] || 0;
  response[item.genre]++;
});


console.log(response);

现在你可以迭代响应和绘画。

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

2 个答案:

ES6

ES5