Tips for organizing a JSON object based on an integer column such as "3", "2", "5"

Question

Tips for organizing a JSON object based on an integer column such as "3", "2", "5"

I am facing a challenge with sorting a JSON object that has a column containing numbers. The issue arises because the column is of string type. How can I sort string numbers in numerical order?

var myArray = [{
  name: 'David',
  total: "6"
}, {
  name: 'John',
  total: "2"
}, {
  name: 'Joe',
  total: "8"
}, {
  name: 'Ana',
  total: "14"
}];

var ascending;
var descending;

function test1() {
  ascending = _.sortBy(myArray, 'total');
  console.log(JSON.stringify(ascending));
}

function test2() {
  descending = ascending.reverse();
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701c1f1411031830445e41475e44">[email protected]</a>/lodash.min.js"></script>
<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>

javascript json sorting vue.js lodash

Answer 1

Answer №1

Implement _.sortBy() by using a callback function, and ensure to convert the values in the total field to numbers:

var myArray = [{"name":"David","total":"6"},{"name":"John","total":"2"},{"name":"Joe","total":"8"},{"name":"Ana","total":"14"}];

var ascending;
var descending;

function sortAscending() {
  ascending = _.sortBy(myArray, val => Number(val.total));
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = ascending.reverse();
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b47444f4a58436b1f051a1c051f">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Ascending</button>
<button onclick="sortDescending()">Descending</button>

Answer 2

Implement _.sortBy() by using a callback function, and ensure to convert the values in the total field to numbers:

var myArray = [{"name":"David","total":"6"},{"name":"John","total":"2"},{"name":"Joe","total":"8"},{"name":"Ana","total":"14"}];

var ascending;
var descending;

function sortAscending() {
  ascending = _.sortBy(myArray, val => Number(val.total));
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = ascending.reverse();
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b47444f4a58436b1f051a1c051f">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Ascending</button>
<button onclick="sortDescending()">Descending</button>

Answer 3

Answer №2

Follow these steps to achieve it

To make a comparison in the sort, you need to convert strings to numbers.

var myArray = [{
  name: 'Alice',
  total: "9"
}, {
  name: 'Bob',
  total: "3"
}, {
  name: 'Charlie',
  total: "7"
}, {
  name: 'Denise',
  total: "12"
}];

var ascending;
var descending;

function sortAscending() {
  ascending = myArray.sort((a,b)=>Number(a.total)-Number(b.total));
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = ascending.reverse();
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d4dfcaebf8eacadfc2ded7cddd">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Sort Ascending</button>
<button onclick="sortDescending()">Sort Descending</button>

Answer 4

Follow these steps to achieve it

To make a comparison in the sort, you need to convert strings to numbers.

var myArray = [{
  name: 'Alice',
  total: "9"
}, {
  name: 'Bob',
  total: "3"
}, {
  name: 'Charlie',
  total: "7"
}, {
  name: 'Denise',
  total: "12"
}];

var ascending;
var descending;

function sortAscending() {
  ascending = myArray.sort((a,b)=>Number(a.total)-Number(b.total));
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = ascending.reverse();
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d4dfcaebf8eacadfc2ded7cddd">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Sort Ascending</button>
<button onclick="sortDescending()">Sort Descending</button>

Answer 5

Answer №3

Transform the values of total in an array into numbers using map, then utilize the sort function.

This specific function arranges the elements of the array in ascending order.

var myArray = [{
  name: 'David',
  total: "6"
}, {
  name: 'John',
  total: "2"
}, {
  name: 'Joe',
  total: "8"
}, {
  name: 'Ana',
  total: "14"
}];

let sortedOrder = myArray.map((item) => {
  return {
    name: item.name,
    total: parseInt(item.total, 10)
  }
}).sort((a, b) => {
  return a.total - b.total;
})
console.log(sortedOrder)

Answer 6

Transform the values of total in an array into numbers using map, then utilize the sort function.

This specific function arranges the elements of the array in ascending order.

var myArray = [{
  name: 'David',
  total: "6"
}, {
  name: 'John',
  total: "2"
}, {
  name: 'Joe',
  total: "8"
}, {
  name: 'Ana',
  total: "14"
}];

let sortedOrder = myArray.map((item) => {
  return {
    name: item.name,
    total: parseInt(item.total, 10)
  }
}).sort((a, b) => {
  return a.total - b.total;
})
console.log(sortedOrder)

Answer 7

Answer №4

const myList = [{
  name: 'Sarah',
  total: "10"
}, {
  name: 'Michael',
  total: "5"
}, {
  name: 'Emily',
  total: "3"
}, {
  name: 'Chris',
  total: "9"
}];

let ascendingOrder;
let descendingOrder;

/**
 * Ascending
 * Calls the sort function of the Array object.
 * - Processes the "total" property of each object.
 * -- Converts string numbers into integers for comparison.
 */
function testAscending() {
  ascendingOrder = myList.sort(function(a, b) { return parseInt(a['total']) > parseInt(b['total']); });
  console.log(JSON.stringify(ascendingOrder));
}

/**
 * Descending
 * Calls the sort function of the Array object.
 * - Processes the "total" property of each object.
 * -- Converts string numbers into integers for comparison.
 */
function testDescending() {
  descendingOrder = myList.sort(function(a, b) { return parseInt(a['total']) < parseInt(b['total']); });
  console.log(JSON.stringify(descendingOrder));

}

<button onclick="testAscending()">Ascending</button>
<button onclick="testDescending()">Descending</button>

Answer 8

const myList = [{
  name: 'Sarah',
  total: "10"
}, {
  name: 'Michael',
  total: "5"
}, {
  name: 'Emily',
  total: "3"
}, {
  name: 'Chris',
  total: "9"
}];

let ascendingOrder;
let descendingOrder;

/**
 * Ascending
 * Calls the sort function of the Array object.
 * - Processes the "total" property of each object.
 * -- Converts string numbers into integers for comparison.
 */
function testAscending() {
  ascendingOrder = myList.sort(function(a, b) { return parseInt(a['total']) > parseInt(b['total']); });
  console.log(JSON.stringify(ascendingOrder));
}

/**
 * Descending
 * Calls the sort function of the Array object.
 * - Processes the "total" property of each object.
 * -- Converts string numbers into integers for comparison.
 */
function testDescending() {
  descendingOrder = myList.sort(function(a, b) { return parseInt(a['total']) < parseInt(b['total']); });
  console.log(JSON.stringify(descendingOrder));

}

<button onclick="testAscending()">Ascending</button>
<button onclick="testDescending()">Descending</button>

Answer 9

Answer №5

To implement sorting by the property "total" as shown below:

function sortTotalProperty(prop) {  
    return function(x, y) {  
        if (parseInt(x[prop]) > parseInt(y[prop])) {  
            return 1;  
        } else if (parseInt(x[prop]) < parseInt(y[prop])) {  
            return -1;  
        }  
        return 0;  
    } 
}
myArray.sort(sortTotalProperty("total"));

Answer 10

To implement sorting by the property "total" as shown below:

function sortTotalProperty(prop) {  
    return function(x, y) {  
        if (parseInt(x[prop]) > parseInt(y[prop])) {  
            return 1;  
        } else if (parseInt(x[prop]) < parseInt(y[prop])) {  
            return -1;  
        }  
        return 0;  
    } 
}
myArray.sort(sortTotalProperty("total"));

Answer 11

Answer №6

To implement sorting, you can utilize the _.orderBy function

var myArray = [{"name":"David","total":"6"},{"name":"John","total":"2"},{"name":"Joe","total":"8"},{"name":"Ana","total":"14"}];

var ascending;
var descending;

function sortAscending() {
  ascending = _.orderBy(myArray, v => parseInt(v.total),['asc']);
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = _.orderBy(myArray, v => parseInt(v.total),['desc']);
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9192999c8e95bdc9d3cccad3c9">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Sort Ascending</button>
<button onclick="sortDescending()">Sort Descending</button>

Answer 12

To implement sorting, you can utilize the _.orderBy function

var myArray = [{"name":"David","total":"6"},{"name":"John","total":"2"},{"name":"Joe","total":"8"},{"name":"Ana","total":"14"}];

var ascending;
var descending;

function sortAscending() {
  ascending = _.orderBy(myArray, v => parseInt(v.total),['asc']);
  console.log(JSON.stringify(ascending));
}

function sortDescending() {
  descending = _.orderBy(myArray, v => parseInt(v.total),['desc']);
  console.log(JSON.stringify(descending));

}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9192999c8e95bdc9d3cccad3c9">[email protected]</a>/lodash.min.js"></script>
<button onclick="sortAscending()">Sort Ascending</button>
<button onclick="sortDescending()">Sort Descending</button>

Answer 13

Answer №7

No need to worry about loadlash, simply utilizing the .sort() function will suffice. Have a glance at the code snippet below:

var myArray = [{
  name: 'David',
  total: "6"
}, {
  name: 'John',
  total: "2"
}, {
  name: 'Joe',
  total: "8"
}, {
  name: 'Ana',
  total: "14"
}];

var ascending;
var descending;

function test1() {
  ascending = myArray.sort(function(a,b){
          return Number(a.total) - Number(b.total);
  });
  console.log(ascending)
}

function test2() {
  descending = myArray.sort(function(a,b){
          return Number(b.total) -  Number(a.total);
  });
  console.log(descending);

}

<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>

Answer 14

No need to worry about loadlash, simply utilizing the .sort() function will suffice. Have a glance at the code snippet below:

var myArray = [{
  name: 'David',
  total: "6"
}, {
  name: 'John',
  total: "2"
}, {
  name: 'Joe',
  total: "8"
}, {
  name: 'Ana',
  total: "14"
}];

var ascending;
var descending;

function test1() {
  ascending = myArray.sort(function(a,b){
          return Number(a.total) - Number(b.total);
  });
  console.log(ascending)
}

function test2() {
  descending = myArray.sort(function(a,b){
          return Number(b.total) -  Number(a.total);
  });
  console.log(descending);

}

<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>

Tips for organizing a JSON object based on an integer column such as "3", "2", "5"

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Updating deeply nested document in Mongoose

Troubleshooting an issue in Chrome with animating the "d" value using Snap.svg

Avoiding redundant data in CRUD applications

What is the process for sending an InMemoryUploadedFile to my S3 storage?

Arrange an array of objects based on boolean values first, followed by numerical values in JavaScript

Learn the technique for showcasing numerous markers on Google Maps, each equipped with its own individualized info windows

iOS app launch does not trigger Phonegap handleOpenURL

The pre tag does not have any effect when added after the onload event

Sketch a straight path starting from the coordinates x,y at a specified angle and length

Ways to interact with popup windows using Selenium

Angular request accessing CoinMarketCap API

Maintain the newly selected background color for the current day in fullcalendar when navigating to the next or previous month

Exploring AngularJS and the Power of i18next

CanvasJS showcasing a variety of pie charts

Is it possible to assign a value to the "input" that is different from the Vue variable?

Parsing JSON data in Node.js using Express

Using Axios: Manually Adding the X-XSRF-TOKEN Header

"Discovering issues with the functionality of Antd Table's search and reset capabilities

Cloud Firestore trigger fails to activate Cloud function

Incorporate a React web application seamlessly into a React Native WebView component