Tim Jansen Tim Jansen - 1 month ago 6
HTML Question

Sort Array with Objects to newest date

I am making an chat App, all Contacts are saved as Objects in one array:

var contacts = [{name: "Ruud", age: 20},{name: "Elke", age: 17}];


Than I am having the chat messages for every contact saved in an Object Array:

var message_ruud = [{mes: "Hi", date: 1477064075},{mes: "Ok", date: 1477066075}];
var message_elke = [{mes: "Lol", date: 1477069075},{mes: "Ok", date: 1477063075}];


Now the contacts shell be displayed, sorted by the contact with the highest (so the newest time) timestamp. How to do this (so fast as possible)?

EDIT (because question is not clear):

Finally I want to have an Output of the CONTACTS they shell be sortet to where the newest message was sent, to find out where the newest message is you have the message arrays (like _ruud, _elke).



var contacts = [{name: "Ruud"},{name: "Elke"}];
var message_elke = [{msg: "Hi",date: 20}];
var message_ruud = [{msg: "Hello",date: 10}];

document.getElementById("contacts").innerHTML = contacts[0].name+"</br>"+contacts[1].name;

<div id="contacts"></div>




It should not displayed in this order but like this: ELKE, RUUD because last message was written to Elke

Answer

See demo below using Array.prototype.sort to sort message_ruud array from lastest to oldest - you can do the same with message_elke:

var message_ruud = [{mes: "Hi", date: 1477064075},{mes: "Ok", date: 1477066099}];

var result = message_ruud.sort(function(a,b){
   return (b.date - a.date) || 0;
});

console.log(result);

EDIT:

Maybe this will point you in the right direction - explanations inline:

var contacts = [{name: "Ruud"},{name: "Elke"}];
var message_elke = [{msg: "Hi",date: 20}, {msg: "Hi",date: 30 }];
var message_ruud = [{msg: "Hello",date: 10}, {msg: "Hello",date: 400}];

var result = contacts.sort(function(a, b) {

  // find max date for Ruud
  var ruud_max = message_ruud.map(function(element) {
    return element.date;
  }).reduce(function(a, b) {
    return Math.max(a, b);
  }, 0);

  // find max date for Elke
  var elke_max = message_elke.map(function(element) {
    return element.date;
  }).reduce(function(a, b) {
    return Math.max(a, b);
  }, 0);
  
  // sort the contacts array
  return (elke_max - ruud_max) || 0;
});

console.log(result);

EDIT 2:

Consider the case with many contacts - you need to rethink the data structure. So here goes - looks a bit complicated though! You can test it by extending the data structure for the message and the contact:

var contacts = [{
  name: "Ruud"
}, {
  name: "Elke"
}, {
  name: "Alan"
}];

var messages = [{
  name: "Ruud",
  message: [{
    msg: "Hello",
    date: 10
  }, {
    msg: "Hello",
    date: 400
  }]
}, {
  name: "Elke",
  message: [{
    msg: "Hi",
    date: 20
  }, {
    msg: "Hi",
    date: 30
  }]
}, {
  name: "Alan",
  message: [{
    msg: "Hi there",
    date: 20
  }, {
    msg: "Lol",
    date: 40
  }]
}];

var result = contacts.sort(function(x, y) {

  var max_date_x = messages.find(function(element){
    return element.name === x.name;     
  }).message.map(function(element) {
    return element.date;
  }).reduce(function(a, b) {
    return Math.max(a, b);
  }, 0);

  var max_date_y = messages.find(function(element){
    return element.name === y.name;     
  }).message.map(function(element) {
    return element.date;
  }).reduce(function(a, b) {
    return Math.max(a, b);
  }, 0);

  // sort the contacts array
  return (max_date_y - max_date_x) || 0;
});

console.log(result);