Angular Ordering Map Object

Question

Angular Ordering Map Object

Having an issue that I need help with: I have generated a key-value list and I am looking to sort it in descending order. As you can see in the stackblitz example, I have demonstrated how I create the list and attempt to sort it using different methods. However, the outcome remains the same (sorting them in decreasing order).

Note: I specifically require a key-value list instead of an array.

Stack: https://stackblitz.com/edit/angular-a1yfkd

javascript angular typescript

Answer 1

Answer №1

I have a list with key-value pairs that I want to sort in descending order.

Here's one way to achieve that:

Convert the keys of your map into a string array,
Sort the keys (you can use a custom sorting function if needed),
Create a new object by iterating through the sorted keys and populate it, then return it.

Does this method work for you?

const unsortedList: any = {
  z: 'last',
  b: '2nd',
  a: '1st',
  c: '3rd'
};

function sort(unsortedList: any): any {
  const keys: string[] = Object.keys(unsortedList);
  const sortedKeys = keys.sort().reverse(); //reverse if necessary
  const sortedList: any = {};
  sortedKeys.forEach(x => {
    sortedList[x] = unsortedList[x];
  });
  return sortedList;
}

function sortWithoutUselessVariables(unsortedList: any): any {
    const sortedList: any = {};
    Object.keys(unsortedList)
      .sort() // or pass a custom compareFn there, faster than using .reverse()
      .reverse()
      .forEach(x => sortedList[x] = unsortedList[x])
    return sortedList;
}

console.log('unsorted:', unsortedList);
console.log('sorted:', sort(unsortedList));

Answer 2

I have a list with key-value pairs that I want to sort in descending order.

Here's one way to achieve that:

Convert the keys of your map into a string array,
Sort the keys (you can use a custom sorting function if needed),
Create a new object by iterating through the sorted keys and populate it, then return it.

Does this method work for you?

const unsortedList: any = {
  z: 'last',
  b: '2nd',
  a: '1st',
  c: '3rd'
};

function sort(unsortedList: any): any {
  const keys: string[] = Object.keys(unsortedList);
  const sortedKeys = keys.sort().reverse(); //reverse if necessary
  const sortedList: any = {};
  sortedKeys.forEach(x => {
    sortedList[x] = unsortedList[x];
  });
  return sortedList;
}

function sortWithoutUselessVariables(unsortedList: any): any {
    const sortedList: any = {};
    Object.keys(unsortedList)
      .sort() // or pass a custom compareFn there, faster than using .reverse()
      .reverse()
      .forEach(x => sortedList[x] = unsortedList[x])
    return sortedList;
}

console.log('unsorted:', unsortedList);
console.log('sorted:', sort(unsortedList));

Angular Ordering Map Object

Answer №1

Similar questions

`Need help setting the active class for a bootstrap navbar using Angular JS?`

Angular noticed a shift in the expression once it was verified

a guide to effortlessly updating data in ng2-charts in real-time using Firebase

Tips for securely encrypting passwords before adding them to a database:

Slicknav is failing to appear on the screen, although it is being

Is using canvas the best option for creating simple image animations with JavaScript?

I am curious about the significance behind 'this.object.position' within the trackball feature of Three.JS

What is the best way to retrieve that input value?

Differences between a readonly variable and a method with a readonly type in TypeScript

What is the best way to retrieve a specific value from a nested array that is within an array of objects

Ensure that the floated element stretches to 100% height in order to completely fill the page

Using the typescript infer feature does not function properly when dealing with arrays

Error encountered while trying to retrieve JSON data

What could be causing the audio file not to be received from the front end React to the Python server?

Differentiate the selected level on the DOM

Transferring data as a JSON object from PHP to JavaScript

Start the CSS3 animation in reverse right away

How can I extract and display chosen values from multiple dropdown menus in designated text boxes based on their unique identifiers?

Adding elements to a page while it is running can be achieved using a variety

Using Node.js with the Instagram API resulted in the error message: "Failed to decode a text frame in UTF-8 format."