Question

有人可以帮忙弄清楚如何分组和显示JSON对象？这是我的例子：例如，我有一个名为“results.php”的JSON文件：

[
    { "name": "project1", "url": "picture1-1.jpg"},
    { "name": "project1", "url": "picture1-2.jpg"},
    { "name": "project2", "url": "picture2-1.jpg"},
    { "name": "project3", "url": "picture3-1.jpg"},
    { "name": "project1", "url": "picture1-3.jpg"},
    { "name": "project4", "url": "picture4-1.jpg"},
    { "name": "project3", "url": "picture3-2.jpg"},
    { "name": "project1", "url": "picture1-4.jpg"}
]

我想在不同的div中显示所有这些项目，即项目1应该只包含图片picture1-1.jpg，picture1-2.jpg，picture1-3.jpg和picture1-4.jpg等等。每个项目。我试图使用此代码在循环中显示JSON数据，它工作正常：

var source="results.php";
  $.getJSON(source,function(json){
      $.each(json, function(i,post){

        if (post.name)
        $(".body-wrapper").append('<div class="post"><h1>'+post.name+'</h1><p>'+post.url+'</p></div>');
      });
  });

但我仍然无法弄清楚如何为JSON文件中的每个项目单独显示JSON数据。

希望你能帮助我解决这个问题。我会非常感谢你。

提前谢谢！：）

祝你好运，亚历

Answer 1

这个fiddle按名称对它们进行分组。在chrome中使用CTRL + J来查看分组JSON的控制台输出

$.each(array, function (i, item) {  // iterate your JSON array  
    var foundItem = false; // track if an item exists in your new array
    $.each(separateArray, function (y, newItem) { // iterate your new array
        if (newItem.name == item.name) { // if there is an item with the same name
            if (!(newItem.url instanceof Array)) { // check if the url is an array
                newItem.url = [newItem.url]; // if not, then make it an array
            }
            newItem.url.push(item.url); // push the url as an array
            foundItem = true; // notify that the item is found and we dont have to add it
        }
    });

    if (!foundItem) { // if no item is found
     separateArray.push(item);    // push this item into our new array
    }
});

我个人喜欢使用knockout将数据绑定到视图。以下是我使用knockout

所做的事情

我将$.getJson放入viewModel那个方式，当敲门初始化时，它将触发ajax请求，然后填充绑定数组。

var viewModel = function () {
    var self = this;

    self.displayArray = ko.observableArray([]);

    $.getJSON("/echo/json/",function(json){
        // here obviously you put json through that groupJson function
      self.displayArray(groupJson());
  });
}

这样就不需要自己尝试构建html显示，并预测页面完全呈现时的效果。 Knockout将根据需要创建HTML项目（例如，如果您使用了foreach）。

通过这种方式，您仍然可以看到HTML页面的设计以及它与其他页面的匹配方式。

Answer 2

这可以通过多种方式解决，但我会采取不同的方式：

$.getJSON('http://yourdomain.com/results.php', function(data){
    $.each(data, function(index, element){
        if(!$('div.' + element.name)[0]) {
            $('.container').append('<div class="box '+element.name+'"></div>');
            $('div.' + element.name).append('<h1>'+element.name+'</h1>');
        }
        $('div.' + element.name).append('<p>'+element.url+'</p>');
    });
});

Sample Fiddle

如何将几个具有相同名称的JSON对象组合在一起并分别显示这些组？

2 个答案: