How to sort an object with media query as key in Javascript?

Question

Given the following Javascript object:

 {
      //none represent no media query
      none: "foo",
      '@media(max-width:450px)': "foo",
      '@media(min-width:1200px)': "foo",
      '@media(min-width:768px)': "foo",
 }

How can I sort it into an object like this, which resemble the correct stylesheet?

 {
      //none represent no media query
      none: "foo",
      '@media(max-width:450px)': "foo",
      '@media(min-width:768px)': "foo",
      '@media(min-width:1200px)': "foo",
 }

possible duplicate of: https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key — Masoud Tahmasebi, Sep 02 '21 at 08:33
@GabrielePetrioli because I think he wants to generate CSS based on them, and the order matters there — Masoud Tahmasebi, Sep 02 '21 at 09:10
It will be better to use `array` instead of `object` if order matters to you. — Hassan Imam, Sep 02 '21 at 09:21

score 0 · Answer 1 · answered Sep 02 '21 at 09:12

I used the answer linked by Masoud Tahmasebi and found the regex here.

parseInt("none".replace( /(^.+\D)(\d+)(\D.+$)/i,'$2')) will return NaN so I used isNaN() to let the none keys go first.

a = {
      '@media(max-width:450px)': "foo",
      '@media(min-width:1200px)': "foo",
      '@media(min-width:768px)': "foo",
        none: "foo",
 }

function compare(a,b){
    a = parseInt(a.replace( /(^.+\D)(\d+)(\D.+$)/i,'$2'));
    b = parseInt(b.replace( /(^.+\D)(\d+)(\D.+$)/i,'$2'));
    if(isNaN(a) || a < b) return -1;
    if(isNaN(b) || a > b) return 1;
    return 0;
}

const ordered = Object.keys(a).sort(compare).reduce(
  (obj, key) => { 
    obj[key] = a[key]; 
    return obj;
  }, 
  {}
);

How to sort an object with media query as key in Javascript?

1 Answers1