Sort the array based on two criteria

Question

Sort the array based on two criteria

Here is an array of objects with mock timestamps:

var firstArr = [{
  id: 1,
  a: 2,
  timestemp: 111
}, {
  id: 2,
  a: 4,
  timestemp: 222
}, {
  id: 3,
  a: 6,
  timestemp: 333
}, {
  id: 1,
  a: 3,
  timestemp: 777
}, {
  id: 3,
  a: 5555,
  timestemp: 5555
}];

I want to filter this array and create a new array with unique values.

The final array I'm looking for is:

var endArr = [{
  id: 1,
  a: 3,
  timestemp: 777
}, {
  id: 2,
  a: 4,
  timestemp: 222
},  {
  id: 3,
  a: 5555,
  timestemp: 555
}];

To achieve this, I need to filter the array by two criteria:

Unique ID (only entries with IDs 1 & 3 appear once)

Timestamp (include only objects with the latest timestamp)

Is it possible to accomplish this using array methods like map/reduce/filter?

I attempted to use array.filter but was unsuccessful.

javascript arrays object javascript-objects lodash

Answer 1

Answer №1

If you want to retrieve items with unique IDs and the latest timestamps, you can use the functions orderBy() and uniqBy():

var sampleArray = [{
  id: 1,
  value: 2,
  timestamp: 111
}, {
  id: 2,
  value: 4,
  timestamp: 222
}, {
  id: 3,
  value: 6,
  timestamp: 333
}, {
  id: 1,
  value: 3,
  timestamp: 777
}, {
  id: 3,
  value: 5555,
  timestamp: 5555
}];

var resultArray = _(sampleArray)
.orderBy(['id', 'timestamp'], ['asc', 'desc'])
.uniqBy('id')
.value();

console.log(resultArray);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

Answer 2

If you want to retrieve items with unique IDs and the latest timestamps, you can use the functions orderBy() and uniqBy():

var sampleArray = [{
  id: 1,
  value: 2,
  timestamp: 111
}, {
  id: 2,
  value: 4,
  timestamp: 222
}, {
  id: 3,
  value: 6,
  timestamp: 333
}, {
  id: 1,
  value: 3,
  timestamp: 777
}, {
  id: 3,
  value: 5555,
  timestamp: 5555
}];

var resultArray = _(sampleArray)
.orderBy(['id', 'timestamp'], ['asc', 'desc'])
.uniqBy('id')
.value();

console.log(resultArray);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

Answer 3

Answer №2

At first glance, you misspelled timestamp as timestemp.

var firstArr = [{
  id: 1,
  a: 2,
  timestamp: 111
}, {
  id: 2,
  a: 4,
  timestamp: 222
}, {
  id: 3,
  a: 6,
  timestamp: 333
}, {
  id: 1,
  a: 3,
  timestamp: 777
}, {
  id: 3,
  a: 5555,
  timestamp: 5555
}];

Behold the function below:

function updateList(a_list) {

    var seen = {};

    for (var entry in a_list) {
        var id = a_list[entry]["id"];

        if (seen.hasOwnProperty(id)) {
            var current_timestamp = seen[id]["timestamp"]
            var check_timestamp = a_list[entry]["timestamp"]

            if (current_timestamp < check_timestamp) {
                 seen[id] = a_list[entry];
            }

        } else {
            seen[id] = a_list[entry];
        }
    }

    var updated = [];
    for (var newest in seen) {
        updated.push(seen[newest]);
    } 
    return updated;
}

https://jsfiddle.net/vpg3onqm/
If this solution meets your needs, be sure to upvote and select it as the accepted answer.

Answer 4

At first glance, you misspelled timestamp as timestemp.

var firstArr = [{
  id: 1,
  a: 2,
  timestamp: 111
}, {
  id: 2,
  a: 4,
  timestamp: 222
}, {
  id: 3,
  a: 6,
  timestamp: 333
}, {
  id: 1,
  a: 3,
  timestamp: 777
}, {
  id: 3,
  a: 5555,
  timestamp: 5555
}];

Behold the function below:

function updateList(a_list) {

    var seen = {};

    for (var entry in a_list) {
        var id = a_list[entry]["id"];

        if (seen.hasOwnProperty(id)) {
            var current_timestamp = seen[id]["timestamp"]
            var check_timestamp = a_list[entry]["timestamp"]

            if (current_timestamp < check_timestamp) {
                 seen[id] = a_list[entry];
            }

        } else {
            seen[id] = a_list[entry];
        }
    }

    var updated = [];
    for (var newest in seen) {
        updated.push(seen[newest]);
    } 
    return updated;
}

https://jsfiddle.net/vpg3onqm/
If this solution meets your needs, be sure to upvote and select it as the accepted answer.

Answer 5

Answer №3

When faced with the requirement to utilize filter, map, or reduce, I believe the following approach would be suitable:

var latestById = firstArr.reduce(function(state, curr) {
  if(state[curr.id]){ // Check if id has been encountered before
     if(curr.timestamp > state[curr.id].timestamp) { // If current item is more recent
        state[curr.id] = curr; // Update as latest item
     }
  } else {
     state[curr.id]  = curr; // Add because it's a new id
  }

  return state; // Pass updated state to next array element
}, {});

var endArr = Object.keys(latestById)
    .map(function (key) {return bestPerId[key]});

This code initializes an empty state object ({}), iterates through each item in firstArr, and determines if the id is known. If so, it tracks the item with the highest timestamp in the state. The updated state is passed on for each element in firstArr. Since the result is an object (with id's as keys and corresponding items as values), we convert it back to an array using map.

Answer 6

When faced with the requirement to utilize filter, map, or reduce, I believe the following approach would be suitable:

var latestById = firstArr.reduce(function(state, curr) {
  if(state[curr.id]){ // Check if id has been encountered before
     if(curr.timestamp > state[curr.id].timestamp) { // If current item is more recent
        state[curr.id] = curr; // Update as latest item
     }
  } else {
     state[curr.id]  = curr; // Add because it's a new id
  }

  return state; // Pass updated state to next array element
}, {});

var endArr = Object.keys(latestById)
    .map(function (key) {return bestPerId[key]});

This code initializes an empty state object ({}), iterates through each item in firstArr, and determines if the id is known. If so, it tracks the item with the highest timestamp in the state. The updated state is passed on for each element in firstArr. Since the result is an object (with id's as keys and corresponding items as values), we convert it back to an array using map.

Answer 7

Answer №4

To ensure this method works effectively, it is crucial that the array firstArr is arranged in ascending order based on timestamps. The resultant array will also maintain timestamp-based ordering.

The algorithm begins by scanning the array from the end (largest timestamps) and adds each element to the new array only if it has not been included before. The array found acts as a tracker for extracted elements.

var found = [];
firstArr.reverse().filter( function(el){

  if( found.indexOf( el.id ) === -1 ){
    found.push( el.id );
    return true;
  }
  return false;

}).reverse();

Answer 8

To ensure this method works effectively, it is crucial that the array firstArr is arranged in ascending order based on timestamps. The resultant array will also maintain timestamp-based ordering.

The algorithm begins by scanning the array from the end (largest timestamps) and adds each element to the new array only if it has not been included before. The array found acts as a tracker for extracted elements.

var found = [];
firstArr.reverse().filter( function(el){

  if( found.indexOf( el.id ) === -1 ){
    found.push( el.id );
    return true;
  }
  return false;

}).reverse();

Answer 9

Answer №5

Utilize the power of groupBy method: https://lodash.com/docs#groupBy

_(firstArr)
  .groupBy('id')
  .map(function(x) {
    return _(x).orderBy(x,['timestemp'], ['desc']).head();
  })
  .value();

https://jsfiddle.net/koljada/53esaqLz/3/

Answer 10

Utilize the power of groupBy method: https://lodash.com/docs#groupBy

_(firstArr)
  .groupBy('id')
  .map(function(x) {
    return _(x).orderBy(x,['timestemp'], ['desc']).head();
  })
  .value();

https://jsfiddle.net/koljada/53esaqLz/3/

Answer 11

Answer №6

To begin, you can arrange the elements by timestamp and then eliminate duplicate ids:

var firstArr = [
    { id: 1, a: 2, timestemp: 111 },
    { id: 2, a: 4, timestemp: 222 },
    { id: 3, a: 6, timestemp: 333 },
    { id: 1, a: 3, timestemp: 777 },
    { id: 3, a: 5555, timestemp: 5555 }
];

// sorting firstArr by descending timestamp:
firstArr.sort((x,y)=>y.timestemp-x.timestemp);

// retaining only the initial instance of each id:
var endArr = firstArr.filter((o,i)=>i==firstArr.findIndex(u=>u.id==o.id));

// task completed
output.innerHTML = JSON.stringify( endArr, null, 2 );

<pre id=output>

Answer 12

To begin, you can arrange the elements by timestamp and then eliminate duplicate ids:

var firstArr = [
    { id: 1, a: 2, timestemp: 111 },
    { id: 2, a: 4, timestemp: 222 },
    { id: 3, a: 6, timestemp: 333 },
    { id: 1, a: 3, timestemp: 777 },
    { id: 3, a: 5555, timestemp: 5555 }
];

// sorting firstArr by descending timestamp:
firstArr.sort((x,y)=>y.timestemp-x.timestemp);

// retaining only the initial instance of each id:
var endArr = firstArr.filter((o,i)=>i==firstArr.findIndex(u=>u.id==o.id));

// task completed
output.innerHTML = JSON.stringify( endArr, null, 2 );

<pre id=output>

Sort the array based on two criteria

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How can the value of a number in Angular be changed without altering its original value?

Using AngularJS to send the $http response back to the calling object

Switch the designation to Hover Class

Why does $http.get succeed but I can't retrieve the output?

Turn off spellcheck for all material-ui elements

Is it possible to replicate the functionality of "npm run x" without including a "scripts" entry?

Unable to retrieve HTML content through a Node.js server

Using values from a preexisting array to generate new arrays in JavaScript

Error encountered in React while using an object in useState: TypeError - Unable to access property 'name' of undefined

How can one smoothly rewind X frames in a video or animation on a webpage without experiencing lag?

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Is it possible to incorporate multiple IDs into the changeImage function for a radio

What is the best method for adding files to JSZip from a remote URL?

Tips for updating the chosen value with jquery or javascript

What is the significance of declaring a constant array in JavaScript?

The JavaScript object is unable to reach the PHP controller

How to Use Jquery to Delete a Specific String

In the world of programming, what sets a pointer to pointer apart from a pointer to array?

Implementing live reload in a React application using docker-compose

The backtick is not functioning correctly when trying to append the result in the Internet Explorer browser