Arrange objects in an array by the date field using Meteor

Question

Arrange objects in an array by the date field using Meteor

I have updated my user collection in my Meteor app with an array of objects named contacts. This is how it looks now:

 {
    "_id" : "p6c4cSTb3cHWaJqpG",
    "createdAt" : ISODate("2016-05-11T11:30:11.820Z"),
    "services" : {
            .....
      },
  "username" : "admin",
  "emails" : [ 
    {
        "address" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43262e222a2f03262e222a2f6d202c2e">[email protected]</a>",
        "verified" : true
    }
   ],
   "points" : 28,
   "contacts" : [ 
       {
        "when" : ISODate("2016-06-02T12:22:53.747Z"),
        "who" : "4YBufbE9PByJBkasy"
       }, 
       {
        "when" : ISODate("2016-06-02T12:00:41.833Z"),
        "who" : "EvF7DbFazmiuG86mD"
       }, 
       {
        "when" : ISODate("2016-06-02T12:21:41.415Z"),
        "who" : "MNFTSzjjzmYWgDvey"
       }
   ]
 }

Although I can successfully display the contacts on my page, they are currently in the same order as they are in the collection. Is it possible to arrange them based on the date in the when field?

This is my helper method:

 Template.contacts.helpers({
  'cont': function(){
     var user = Meteor.user();
     return user;
   }
 });

And this is my Template:

 <template name="contacts">
    {{#each cont.contacts}}
        <h1><a href="/message/{{who}}">{{who}}</a></h1>
    {{/each}}
 </template>

javascript arrays mongodb meteor spacebars

Answer 1

Answer №1

Akram Saouri provided valuable guidance, leading me in the right direction to find a solution. After delving deeper into the problem, I was able to come up with a foolproof solution. Make sure to refer to official documentation for additional insights.

Client.js:

 Template.contacts.helpers({
    'cont': function(){
        var contacts = Meteor.user().contacts;
        var result = contacts.sort(function (a,b) {
           if (a.when > b.when){
                return -1;
           }
           if (a.when < b.when){
                return 1;
           }
            return 0;
           });
       return result;
      }
    });

Blaze Template:

 <template name="contacts">
        {{#each cont}}
             <h1><a href="/message/{{who}}">{{who}}</a></h1>
        {{/each}}
 </template>

Answer 2

Akram Saouri provided valuable guidance, leading me in the right direction to find a solution. After delving deeper into the problem, I was able to come up with a foolproof solution. Make sure to refer to official documentation for additional insights.

Client.js:

 Template.contacts.helpers({
    'cont': function(){
        var contacts = Meteor.user().contacts;
        var result = contacts.sort(function (a,b) {
           if (a.when > b.when){
                return -1;
           }
           if (a.when < b.when){
                return 1;
           }
            return 0;
           });
       return result;
      }
    });

Blaze Template:

 <template name="contacts">
        {{#each cont}}
             <h1><a href="/message/{{who}}">{{who}}</a></h1>
        {{/each}}
 </template>

Answer 3

Answer №2

If you want to streamline the process, you can directly send the contacts array from the helpers and have it pre-sorted like this:

 Template.contacts.helpers({
  'contacts': function(){
     var currentUser = Meteor.user();
     var sortedContacts = currentUser.contacts.sort({'when':'-1'});
     return sortedContacts;
   }
 });

By doing this, your Blaze template will appear much cleaner and simpler:

 <template name="contacts">
    {{#each contacts}}
        <h1><a href="/message/{{who}}">{{who}}</a></h1>
    {{/each}}
 </template>

Answer 4

If you want to streamline the process, you can directly send the contacts array from the helpers and have it pre-sorted like this:

 Template.contacts.helpers({
  'contacts': function(){
     var currentUser = Meteor.user();
     var sortedContacts = currentUser.contacts.sort({'when':'-1'});
     return sortedContacts;
   }
 });

By doing this, your Blaze template will appear much cleaner and simpler:

 <template name="contacts">
    {{#each contacts}}
        <h1><a href="/message/{{who}}">{{who}}</a></h1>
    {{/each}}
 </template>

Arrange objects in an array by the date field using Meteor

Answer №1

Answer №2

Similar questions

Simulate a keyboard key being pressed and held for 5 seconds upon loading the page

The functionality of Webdriver.waitUntil is not meeting the expected outcomes

Using Django Sessions for User Authentication in React Applications

I have a task to execute an Ajax request to retrieve and display data from my database table. My approach involves utilizing Perl CGI and attempting to invoke a Perl script using JavaScript

Converting an unbroken series of string values into organized key-value pairs for easy reference

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Exploring Mongoose Querying

What is causing the components to not re-render after a state change in React?

Tips for hiding a soft keyboard with jQuery

Encountering difficulty locating the $wpdb variable during an AJAX request

`req.user` seems to be unresolved, but it is actually defined

How can we display or conceal text indicating the age of a patient based on the value returned from selectedPatient.age in a React application?

Dealing with errors when Ajax response is not defined

Steps for displaying a customized view within an NPM module:

The combination of Three.js and React

Experiencing difficulties with updating populated inputs that are connected to fetched data as they are not reflecting changes when modified

Utilizing jQuery to Trigger a Click Event on an Element Without a Class

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

Angular developers are struggling to find a suitable alternative for the deprecated "enter" function in the drag and drop CDK with versions 10 and above

Integrating Javascript and JQuery in Reactjs: A Comprehensive Guide