How to sort an array of objects with alphabets first and then with numbers in react

Question

Code:

keyword.sort((a, b) => a.Acr.localeCompare(b.Acr));

Current output:

[{
        "Id": 947,
        "Acr": 502,
        "Definition": "ADefBulk6",
        "index": 0
    }, {
        "Id": 762,
        "Acr": "AO",
        "Definition": "Anti",
        "ID": 762,
        "index": 1
    }, {
        "Id": 72,
        "Acr": "AW",
        "Definition": "Corporate",
        "ID": 762,
        "index": 1
    }
]

Expected output:

[{
        "Id": 947,
        "Acr": "AO",
        "Definition": "ADefBulk6",
        "index": 0
    }, {
        "Id": 762,
        "Acr": "AW",
        "Definition": "Anti",
        "ID": 762,
        "index": 1
    }, {
        "Id": 72,
        "Acr": 502,
        "Definition": "Corporate",
        "ID": 762,
        "index": 1
    }
]

See this please: [https://stackoverflow.com/questions/4340227/sort-mixed-alpha-numeric-array/62766690#62766690](https://stackoverflow.com/questions/4340227/sort-mixed-alpha-numeric-array/62766690#62766690) — Rob Moll, Jul 10 '20 at 17:13
Does this answer your question? [Sort mixed alpha/numeric array](https://stackoverflow.com/questions/4340227/sort-mixed-alpha-numeric-array) — xMayank, Jul 10 '20 at 17:27

eol · Answer 1 · 2020-07-10T19:54:25.660

You could check in the sort callback if both Acr-values are strings, if yes return the result of the string-comparison. If only one of the values is a string give it priority and if neither of them is a string (I'm assuming you only have numbers and strings as their values), return the (signed) difference of the values. Something like this should do it:

const arr=[
{"Id":949,"Acr":900,"Definition":"ADefBulk6","index":0},
{"Id":947,"Acr":502,"Definition":"ADefBulk6","index":0},
{"Id":762,"Acr":"AW","Definition":"Anti","ID":762,"index":1},
{"Id":72,"Acr":"AO","Definition":"Corporate","ID":762,"index":1},
{"Id":76,"Acr":"AA","Definition":"Corporate","ID":762,"index":1}];

arr.sort((a, b) => {
    if (typeof a.Acr === 'string' && typeof b.Acr === 'string') {
        return a.Acr.localeCompare(b.Acr);
    } else if (typeof a.Acr === 'string') {
        return -1;
    } else if (typeof b.Acr === 'string') {
        return 1;
    } else {
        return Math.sign(a.Acr - b.Acr);
    }
});

console.log(arr);

For values with number-strings, you can do:

const arr = [
    {"Id": 949, "Acr": "900", "Definition": "ADefBulk6", "index": 0},
    {"Id": 947, "Acr": "502", "Definition": "ADefBulk6", "index": 0},
    {"Id": 762, "Acr": "AW", "Definition": "Anti", "ID": 762, "index": 1},
    {"Id": 72, "Acr": "AO", "Definition": "Corporate", "ID": 762, "index": 1},    
    {"Id":73,  "Acr": "401(c)(d)","Definition":"Corporate","ID":762,"index":1},
    {"Id": 76, "Acr": "AA", "Definition": "Corporate", "ID": 762, "index": 1}];

arr.sort((a, b) => {
    const nrA = Number.parseInt(a.Acr);
    const nrB = Number.parseInt(b.Acr);

    if (isNaN(nrA) && isNaN(nrB)) {
        return a.Acr.localeCompare(b.Acr);
    } else if (isNaN(nrA)) {
        return -1;
    } else if (isNaN(nrB)) {
        return 1;
    } else {
        return Math.sign(nrA - nrB);
    }
});

console.log(arr);

score 0 · Answer 2 · answered Jul 10 '20 at 17:41

one way to do it to sort them separately and then add them together

sortx=[{ "Id": 947, "Acr": 502, "Definition": "ADefBulk6", "index": 0 },  { "Id": 72, "Acr": "AW", "Definition": "Corporate", "ID": 762, "index": 1 },{ "Id": 762, "Acr": "AO", "Definition": "Anti", "ID": 762, "index": 1 }, { "Id": 100, "Acr": 100, "Definition": "Anti", "ID": 762, "index": 1 } ]
var sortalph=sortx.filter(o=>typeof(o.Acr)=="string").sort((a,b)=>a.Acr.localeCompare(b.Acr))
var sortnum=sortx.filter(o=>typeof(o.Acr)=="number").sort((a,b)=>a.Acr-b.Acr)

console.log([...sortalph,...sortnum])

epascarello · Accepted Answer · 2020-07-10T19:45:00.980

0

Check the types if both strings, sort them. If both numbers sort them. If different, move string before.

var arr = [{
        "Acr": 502,
    }, {
        "Acr": "AO",
    }, {
        "Acr": "AW",
    }, {
        "Acr": 402,
    }
];
arr.sort((a,b) => {
  var tA = typeof a.Acr;
  var tB = typeof b.Acr;
  if (tA === tB && tA === "string") {
    return a.Acr.localeCompare(b.Acr);
  } else if (tA === tB && tA === "number") {
    return a.Acr - b.Acr;
  } else {
    return tA === "string" ? -1 : 1;
  }
});

console.log(arr);

If they are all stored as strings

var arr = [{
        "Acr": "502",
    }, {
        "Acr": "AO",
    }, {
        "Acr": "AW",
    }, {
        "Acr": "402",
    }
];
arr.sort((a,b) => {
  var tA = a.Acr.match(/^\d+$/) ? 'number' : 'string';
  var tB = b.Acr.match(/^\d+$/) ? 'number' : 'string';
  if (tA === tB && tA === "string") {
    return a.Acr.localeCompare(b.Acr);
  } else if (tA === tB && tA === "number") {
    return +a.Acr - +b.Acr;
  } else {
    return tA === "string" ? -1 : 1;
  }
});

console.log(arr);

edited Jul 10 '20 at 19:45

answered Jul 10 '20 at 17:52

epascarello

204,599
20
195
236

Thank you for your response. What if my array is something like this? var arr = [{ "Acr": "502", }, { "Acr": "AO", }, { "Acr": "AW", }, { "Acr": "402", }, { "Acr": "401(c)(d)" ]; I just want the Acr string values that start with a digit to appear after the alphabet string values. Could you help? – Jul 10 '20 at 19:24
@TiaSengupta: Check my updated answer for `Acr`-values with number-strings. – eol Jul 10 '20 at 19:44
I think with this solution `"401(c)(d)"` will not be sorted behind the alpha-chars ... – eol Jul 10 '20 at 19:57
What would be the suitable approach for that? – Jul 10 '20 at 20:00
@eol I do not see that in the OPs values. Seems like it was either numbers or letters. If it is mixed, using the one dupe link (which has my solution) would work. – epascarello Jul 10 '20 at 21:31
It's mentioned in the first comment under this answer.. – eol Jul 10 '20 at 21:50

How to sort an array of objects with alphabets first and then with numbers in react

3 Answers3