JavaScript Array Sorting from Numbers to Characters

Question

These all are the tags which I'm storing into in an array with those who have Type_ as a prefix

My array have multiple type of values but I'm unable to sort them here is the array

{
  Type_5000-10000mAh: [10, "5000-10000mAh", "type_5000-10000mah", "Type_5000-10000mAh", 70],
  Type_15000-20000mAh: [1, "15000-20000mAh", "type_15000-20000mah", "Type_15000-20000mAh", 76],
  Type_USB-C: [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  Type_20000-30000mAh: [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  Type_Wireless: [3, "Wireless", "type_wireless", "Type_Wireless", 160],
  Type_Quick Charger: [1, "Quick Charger", "type_quick-charger", "Type_Quick Charger", 344]
}

and the output I want is like that

{
  Type_5000-10000mAh: [10, "5000-10000mAh", "type_5000-10000mah", "Type_5000-10000mAh", 70],
  Type_15000-20000mAh: [1, "15000-20000mAh", "type_15000-20000mah", "Type_15000-20000mAh", 76],
  Type_20000-30000mAh: [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  Type_USB-C: [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  Type_Wireless: [3, "Wireless", "type_wireless", "Type_Wireless", 160],
  Type_Quick Charger: [1, "Quick Charger", "type_quick-charger", "Type_Quick Charger", 344]
}

and this is the code I'm using to get this array format

    var tags_type = {};
    var indexI = 0;
    $.each(totPro.products, (productsKey, productsValue) => {
      $.each(productsValue.tags, (prodKey, prodVal) => {
        indexI++;
        if(prodVal.toLowerCase().indexOf('type') > -1){
          console.log(prodVal);
          if(tags_type[prodVal] == undefined){
            tags_type[prodVal] = [0, capitalizeFirstLetter(prodVal.slice(5)), prodVal.toLowerCase().replace(/\s+/g, '-').toLowerCase(), prodVal, indexI];
          }
          tags_type[prodVal][0]++;
        }
      });
    });
    console.log(tags_type);

Should Type_USB AND Type_Wireless not come AFTER Type_Quick? — mplungjan, Jan 17 '21 at 07:31
Doesn't matter, but i want number to come 1st, like Type_5000-10000mAh, Type_15000-20000mAh, Type_20000-30000mAh, then it come like this Type_Quick Charger, Type_USB-C, Type_Wireless, the Sequence — Salman Khan Sohoo, Jan 17 '21 at 07:34

mplungjan · Accepted Answer · 2021-01-17T09:38:12.957

You do NOT have an array.

you have an object where you cannot determine the sort order.

You CAN sort the keys and then display the object in that order using localeCompare

Here is a more elaborate explanation: Sort JavaScript object by key

const obj = {
  "Type_5000-10000mAh": [10, "5000-10000mAh", "type_5000-10000mah", "Type_5000-10000mAh", 70],
  "Type_15000-20000mAh": [1, "15000-20000mAh", "type_15000-20000mah", "Type_15000-20000mAh", 76],
  "Type_USB-C": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  "Type_20000-30000mAh": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  "Type_Wireless": [3, "Wireless", "type_wireless", "Type_Wireless", 160],
  "Type_Quick Charger": [1, "Quick Charger", "type_quick-charger", "Type_Quick Charger", 344]
}
const sortAlphaNum = (a, b) => a.localeCompare(b, 'en', { numeric: true });

const showObj = obj => Object.keys(obj).sort(sortAlphaNum).forEach(key => console.log(key,obj[key]));

showObj(obj)

If you really want to have a sorted object, then here is a rewrite from the link I posted

const obj = {
  "Type_5000-10000mAh": [10, "5000-10000mAh", "type_5000-10000mah", "Type_5000-10000mAh", 70],
  "Type_15000-20000mAh": [1, "15000-20000mAh", "type_15000-20000mah", "Type_15000-20000mAh", 76],
  "Type_USB-C": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  "Type_20000-30000mAh": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95],
  "Type_Wireless": [3, "Wireless", "type_wireless", "Type_Wireless", 160],
  "Type_Quick Charger": [1, "Quick Charger", "type_quick-charger", "Type_Quick Charger", 344]
}
const sortAlphaNum = (a, b) => a.localeCompare(b, 'en', { numeric: true });

const sortedObj = Object.keys(obj)
  .sort(sortAlphaNum)
  .reduce((acc, key) => { acc[key] = obj[key]; return acc; },{});

console.log(sortedObj)

Thank you so much but after adding it into an array as I was supposed to show in HTML but its reverting back to the same format. — Salman Khan Sohoo, Jan 17 '21 at 08:02
As I said, this is DISPLAYING the object in the order you want. You could rewrite the object: https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key — mplungjan, Jan 17 '21 at 08:05
@SalmanKhanSohoo See update for a version from the linked answer — mplungjan, Jan 17 '21 at 09:38

Carsten Massmann · Answer 2 · 2021-01-17T08:14:28.397

Mplungian is right in saying that the order of keys in objects is not specified to be preserved in JavaScript. But having said this, many JS implementations do return the keys in the order they were generated. So, maybe you get lucky with the following:

const o={ "Type_5000-10000mAh": [10, "5000-10000mAh", "type_5000-10000mah", "Type_5000-10000mAh", 70], "Type_15000-20000mAh": [1, "15000-20000mAh", "type_15000-20000mah", "Type_15000-20000mAh", 76], "Type_USB-C": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95], "Type_20000-30000mAh": [4, "20000-30000mAh", "type_20000-30000mah", "Type_20000-30000mAh", 95], "Type_Wireless": [3, "Wireless", "type_wireless", "Type_Wireless", 160], "Type_Quick Charger": [1, "Quick Charger", "type_quick-charger", "Type_Quick Charger", 344] };
const pr=s=>s.replace(/\_(\d+)/,(_,m)=>"_"+m.padStart(5,"0"));
p=Object.fromEntries(
     Object.entries(o).sort(([a],[b])=>
         pr(a).localeCompare(pr(b))) );
console.log(p)

p is a newly created object where the keys have been added in the desired order.

@mplungians comparison version (with {numeric:true}) will of course work here just as well!

JavaScript Array Sorting from Numbers to Characters

2 Answers2