How to group several JSON objects with same name together and display these groups separately?

Question

Could someone please help to figure out how can I group and display JSON objects? Here's my example: For example, I have a JSON file called "results.php":

[
    { "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"}
]

And I want to display all of these projects in separate divs, i.e. project 1 should contain only pictures picture1-1.jpg, picture1-2.jpg, picture1-3.jpg and picture1-4.jpg and so on for every project. I tried to use this code to display JSON data in a loop, and it works fine:

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

But I still can't figure out how to display JSON data separately for every project in JSON file.

Hope you can help me to solve this issue. I would be very thankful for this.

Thank you in advance! :)

Best regards, Alex

Answer 1

this fiddle groups them by name. Use CTRL + J in chrome to see the console output of the grouped 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
    }
});

I personally like to use knockout for binding data to the view. Here is what I did using knockout

I put the $.getJson into the viewModel that way, when knockout initialises it will fire the ajax request and then populate the binded array.

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

This way there is no need to try and build up the html display yourself, and predict what its going to look like when the page has fully rendered. Knockout will create HTML items where needed (if you have used a foreach for example).

This way you can still see the design of your page in HTML and how it will fit in with the rest.

Answer 2

This can be tackled in a myriad of ways but I would take it in a different way:

$.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