jQuery Sort nested JSON objects by date?

Question

I've searched StackOverflow before I made this question but I can't find the solutions to my case. I'm receiving objects from multiple Facebook Graph API calls (see first image). What I would like to do is to sort my objects by a date (event.start_time). Is this possible with or without creating an extra array?

The structure of the objects is visible in the second picture.

the variable "event" holds all the objects.

UPDATE I made a global array and pushed all the event objects to it, it's now an array so it should be sortable. I just don't know how to, please help.

        var arr = []; //global array to sort event objects
    //function is called somewhere
    function makeEvents(ids, infowindow, map, accessToken) {
            var currentTime = dateFormat("date", new Date(), true);
            //console.log(currentTime);
            var display = document.getElementById("all");
            var carousel = document.getElementById("carousel-inner");
             // console.log(ids);

            FB.api('/',
            {ids : ids}, 
            function (pages) {
              if(pages) {
                $.each(pages, function(page_key, page_value) {
                    var id = page_value.id;
                    //display.innerHTML += '<tr>';
                    //console.log(id);
                     //if date search changed, since date search input
                    FB.api('/'+ id +'/events?access_token='+ accessToken +'&since='+ currentTime, function (events) { //&offset=0   &until=2016-02-31
                        //console.log(events.data);

                      if(events) {
                        //console.log(events.data)
                        $.each(events.data, function(events_key, events_value) {
                          FB.api('/'+ events_value.id + '?fields=id,name,cover,description,start_time,place,ticket_uri,picture', function (event) {
                            if(event) {                                 
                             //console.log(event);
                             arr.push(event);//fill array
                              }
                          });
                        });
                      }
                    });
                   // display.innerHTML += '</tr>';
                });
              }
            });  
    }
    console.log(arr);
    arr.sort(function(a, b){
     if(a.start_time < b.start_time)
       return -1;
     if(a.start_time > b.start_time)
       return 1;
     return 0;
    });

This shouldn't work since I'm not deep enough in the array.

SOLVED Had to use a timeout function because the array sorted before it was completely filled which made me think it didn't sort at all. If there's a better way to check if the array is done filling, please let me know :)

   setTimeout(function(){
      arr = arr.sort(function (a, b) {
        return a.name.localeCompare( b.name );
      });
      console.log(arr);
    }, 5000);

You don't already have an Array? If you do then this should be trivial with the built in sort and a comparator function. — Dave Newton
– Dave Newton, Commented Nov 18, 2015 at 2:55

brainless coder · Accepted Answer · 2015-11-18 04:24:42Z

2

Can't you use the JavaScript sort function like this ? -

arr.sort(function(a, b){
    if(a.start_time < b.start_time)
        return -1;
    if(a.start_time > b.start_time)
        return 1;
    return 0;
});

http://www.w3schools.com/jsref/jsref_sort.asp

jsfiddle: https://jsfiddle.net/mhccnpkp/

UPDATE: At first I thought this was just a simple sorting problem you are having, but now I see that you are trying to sort the result from a list of ajax calls. In this case you have to wait for all the calls to finish loading and the main fact is, it is not guaranteed that each call will end sequentially. So I would suggest you use a semaphore to make sure all calls are ended and then call sort to sort your array. Something like this -

var arr = []; //global array to sort event objects
//function is called somewhere
var semaphore = 0; //the semaphore
function makeEvents(ids, infowindow, map, accessToken) {
    ....

    FB.api('/',
    {ids : ids}, 
    function (pages) {
      if(pages) {
        $.each(pages, function(page_key, page_value) {

            semaphore += 1; // increase the semaphore for each call
            ....
            FB.api('/'+ id +'/events?access_token='+ accessToken +'&since='+ currentTime, function (events) { //&offset=0   &until=2016-02-31
                //console.log(events.data);

              semaphore -= 1; //reduce semaphore count, sicne this call is completed 
              .....

                  semaphore += 1; // increase the semaphore for next call

                  FB.api('/'+ events_value.id + '?fields=id,name,cover,description,start_time,place,ticket_uri,picture', function (event) {

                    ....

                    semaphore -= 1; //reduce semaphore count, sicne this call is completed 

                    //check if all calls completed
                    if(semaphore == 0){
                        arr.sort(function(a, b){
                            if(a.start_time < b.start_time)
                                return -1;
                            if(a.start_time > b.start_time)
                                return 1;
                            return 0;
                        });
                    }                   
                  });

                });
              }

            });
           ...
        });
      }
    });  
}
console.log(arr);

BTW, this is very basic checking. This will only work if all calls succeeds. So you might also wanna add some check and an error handlers and decrease the semaphore in the error handlers also. Other wise one unsuccessful call will make the system wait indefinitely.

edited Nov 18, 2015 at 4:24

answered Nov 18, 2015 at 2:54

brainless coder

6,4501 gold badge23 silver badges37 bronze badges

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

14 Comments

Auguste Van Nieuwenhuyzen Over a year ago

returns an error: event.sort is not a function, .sort only applies to arrays I think?

brainless coder Over a year ago

make sure events is an array. I have added a jsfiddle

Auguste Van Nieuwenhuyzen Over a year ago

events or event? these are 2 different objects.

brainless coder Over a year ago

The code is to sort any array. Just use the appropriate variable there. Wasn't it obvious?

Auguste Van Nieuwenhuyzen Over a year ago

I have an array now to sort but it's an array filled with objects, that would make something like arr.object.sort(function(a,b){ ... }); ?? Or should I loop it first ?

|

Mitul · Accepted Answer · 2015-11-18 03:58:16Z

var arr = []; //global array to sort event objects
function makeEvents(ids, infowindow, map, accessToken) {
        var currentTime = dateFormat("date", new Date(), true);
        //console.log(currentTime);
        var display = document.getElementById("all");
        var carousel = document.getElementById("carousel-inner");
        // console.log(ids);

        FB.api('/',
        {ids : ids}, 
        function (pages) {
            if(pages) {
                $.each(pages, function(page_key, page_value) {
                    var id = page_value.id;
                    //display.innerHTML += '<tr>';
                    //console.log(id);
                    //if date search changed, since date search input
                    FB.api('/'+ id +'/events?access_token='+ accessToken +'&since='+ currentTime, function (events) { //&offset=0   &until=2016-02-31
                        //console.log(events.data);

                        if(events) {
                            //console.log(events.data)
                            $.each(events.data, function(events_key, events_value) {
                                FB.api('/'+ events_value.id + '?fields=id,name,cover,description,start_time,place,ticket_uri,picture', function (event) {
                                    if(event) {                                 
                                        arr.push(event);
                                        shortArray();
                                    }
                                });
                            });
                        }
                    });
                    // display.innerHTML += '</tr>';
                });
            }
        });  
    }


    function shortArray(){
        arr.sort(function(a, b){
            if(a.start_time < b.start_time)
                return -1;
            if(a.start_time > b.start_time)
                return 1;
            return 0;
        });
    }

Collectives™ on Stack Overflow

jQuery Sort nested JSON objects by date?

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related