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

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

我想在单独的分区中显示所有这些项目，即项目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>');
      });
  });

var source=“results.php”；
$.getJSON（源、函数（json）{
$.each（json、函数（i、post）{
如果（职位名称）
$（“.body wrapper”）.append（“+post.name+”“+post.url+”
”）；
});
});

但我仍然不知道如何在JSON文件中分别显示每个项目的JSON数据

希望你能帮我解决这个问题。对此我将非常感激

先谢谢你！：）

致以最良好的祝愿， Alex

这将按名称对他们进行分组。在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将数据绑定到视图。以下是我使用

我将

$.getJson

放入

viewModel

中，这样，当knockout初始化时，它将触发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页面的设计，以及它如何与其他页面相适应。

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

$.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>');
    });
});

$.getJSON（'http://yourdomain.com/results.php，函数（数据）{
$.each（数据、函数（索引、元素）{
if（！$（'div.+element.name）[0]）{
$（'.container'）。追加（''）；
$（'div.+element.name）.append（''+element.name+''）；
}
$（'div.+element.name）.append（''+element.url+'
'）；
});
});

---

非常感谢您这么快的回答！老实说，我以前从未使用过knockout.js。无论如何，我明天会尝试使用你的解决方案：）@Nekto没有问题，请告诉我你进展如何@Nekto你是怎么开始的？你能控制PHP文件的输出吗？我会改变这一点，以返回合理的数据结构，而不是试图在javascript中处理这种结构不良的数据。我编造了你的答案：）

$.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>');
    });
});