Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

Question

Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

My goal is to showcase the details from the given object on the user interface using Angular's ng-repeat. It is essential for me to arrange the key/value pairs based on their values and exhibit them in sequential order in an array from highest to lowest.

The objects I have are as follows:

{name: 32, name1: 7, name2: 83, name3: 19}

I aim to present something similar on the front end:

name2: 83 name: 32 name3: 19 name1: 7

The task involves sorting the key/value pairs according to their values, though this process seems challenging at the moment. Nevertheless, I am confident that there must be a straightforward solution that has eluded me so far.

javascript angularjs underscore.js lodash

Answer 1

Answer №1

Sorting an object may seem tricky, but it's actually quite straightforward if you convert it into an array first:

var obj = {name: 32, name1: 7, name2: 83, name3: 19};
var pairs = _.pairs(obj);
var sortedPairs = _.sortBy(pairs, function (p) {return -p[1]});
console.log(sortedPairs);

To display the sorted pairs, you can use the following code:

<ul>
  <li ng-repeat="item in sortedPairs">
    {{item[0]}}: {{item[1]}}
  </li>
</ul>

Answer 2

Sorting an object may seem tricky, but it's actually quite straightforward if you convert it into an array first:

var obj = {name: 32, name1: 7, name2: 83, name3: 19};
var pairs = _.pairs(obj);
var sortedPairs = _.sortBy(pairs, function (p) {return -p[1]});
console.log(sortedPairs);

To display the sorted pairs, you can use the following code:

<ul>
  <li ng-repeat="item in sortedPairs">
    {{item[0]}}: {{item[1]}}
  </li>
</ul>

Try implementing Underscore/Lodash to organize an object by values and convert it into an array of pairs that can be utilized with AngularJS ng

Answer №1

Similar questions

Troubleshooting: jQuery ajax form is not functioning as expected

Updating the component following an API request in ReactJS

I'm new to learning JavaScript and I'm wondering how I can receive a single alert using only the if operator

Mobile devices experiencing issues in loading Javascript scripts

Tips for personalizing the appearance of tooltips when hovering over bars on a Chart.js bar chart

Different approaches to verifying a password match on the signup page with angularjs

Create a loop in Vue.js 3 without the need for a query

Issue with Angular 7 Universal: components inside are failing to display

Finding out if an array is empty or not in Reactjs: A Quick Guide

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Nested Angular Bootstrap modals

Discover and capture zip codes using javascript

How can Vue.js pass an array from a child component to its parent component?

Display solely the initial row in the tbody segment of a table. Is there a method to obscure subsequent 1st rows?

Having trouble with your jQuery code not loading properly?

Removing JSON data with JavaScript

When attempting to send an archiver file in NodeJS, the request may become unresponsive

What is the best way to integrate JavaScript with my HTML command box?

Issue with Vue-Validator form validation not functioning properly on JS Fiddle

Receive axios responses in the exact order as the requests for efficient search functionality