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

Do you have control over the output from the PHP file? I would change that to return a reasonable data structure rather than trying to mess with this poorly structured data in javascript. — Mike Brant
– Mike Brant, Commented Apr 16, 2014 at 0:46

Callum Linington · Accepted Answer · 2014-04-16 00:39:06Z

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.

edited Apr 16, 2014 at 0:39

answered Apr 16, 2014 at 0:25

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nekto Over a year ago

Thank you very much for so fast answer! Honestly, I never worked with knockout.js before. Anyway, I'll try to use your solution tomorrow :)

Callum Linington Over a year ago

@Nekto no problems, please let me know how you get on!

Callum Linington Over a year ago

@Nekto how did you get on?

user1978142 · Accepted Answer · 2014-04-16 01:14:48Z

1

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

answered Apr 16, 2014 at 1:14

user1978142

7,9683 gold badges19 silver badges20 bronze badges

1 Comment

Nekto Over a year ago

Hi Kevin, thank you very much for help. I made your answer up :)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related