[Vuejs]-How to sort a json object by integer colum like "3", "2", "5"

by

1👍

Use _.sortBy() with a callback, and convert the total to a number:

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, v => Number(v.total));
  console.log(JSON.stringify(ascending));
}

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

}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>
👤Ori Drori

1👍

You can do it like this

Here in sort for comparison we have to change string to number. 

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((a,b)=>Number(a.total)-Number(b.total));
  console.log(JSON.stringify(ascending));
}

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

}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>
👤Code Maniac

1👍

Use map to create a new array where the value of total will be a number. Then use sort function.

The below function sorts 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)
👤brk

1👍

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

var ascending;
var descending;

/**
 * Ascending
 * Calls the sort function of the Array object.
 * - Processed the "total" property of each object.
 * -- Parsing each string number into a int for comparision.
 */
function test1() {
  ascending = myArray.sort(function(a, b) { return parseInt(a['total']) > parseInt(b['total']); });
  console.log(JSON.stringify(ascending));
}

/**
 * Descending
 * Calls the sort function of the Array object.
 * - Processed the "total" property of each object.
 * -- Parsing each string number into a int for comparision.
 */
function test2() {
  descending = myArray.sort(function(a, b) { return parseInt(a['total']) < parseInt(b['total']); });
  console.log(JSON.stringify(descending));

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

0👍

No need for loadlash, just use .sort() will do the need. take a look at the snippet

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>
👤Akhil Aravind

0👍

Implement like below for sorting by property “total” –

function getSortOrder(prop) {  
    return function(a, b) {  
        if (parseInt(a[prop]) > parseInt(b[prop])) {  
            return 1;  
        } else if (parseInt(a[prop]) < parseInt(b[prop])) {  
            return -1;  
        }  
        return 0;  
    } 
}
array.sort(getSortOrder("total"));
👤harshit

0👍

You can use _.orderBy

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 = _.orderBy(myArray, v => parseInt(v.total),['asc']);
  console.log(JSON.stringify(ascending));
}

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

}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<button onclick="test1()">Ascending</button>
<button onclick="test2()">Descending</button>
👤Biswadev

Leave a comment