sort objects alphabetically ignoring the lower and uppercase letters in Angular

Question

I want to sort objects alphabetically below is the json which i am trying to sort

  const data = {
      Cutting: [{ display_name: 'abc' }, { display_name: 'cdf' }],
      Facials: [{ display_name: 'sdf' }, { display_name: 'sd' }],
      IPL: [{ display_name: 'sdf' }, { display_name: 'er' }],
      Massage: [{ display_name: 'abc' }, { display_name: 'cdf' }],
      Mens: [{ display_name: 'fg' }],
      Styling: [{ display_name: 'cdf' }],
      highlights: [
        { display_name: 'abc' },
        { display_name: 'yyy' },
        { display_name: 'vvv' },
      ],
    };

the output :-

  const data = {
      Cutting: [{ display_name: 'abc' }, { display_name: 'cdf' }],
      Facials: [{ display_name: 'sdf' }, { display_name: 'sd' }],
      highlights: [
        { display_name: 'abc' },
        { display_name: 'yyy' },
        { display_name: 'vvv' },
      ],
      IPL: [{ display_name: 'sdf' }, { display_name: 'er' }],
      Massage: [{ display_name: 'abc' }, { display_name: 'cdf' }],
      Mens: [{ display_name: 'fg' }],
      Styling: [{ display_name: 'cdf' }],
    };

Here is the code which I am trying

const keysSorted = Object.keys(response).sort(function(a, b) {
  debugger;
  return response[a].localeCompare(b.toUpperCase());
});
console.log(keysSorted);

in the above response[a] doesn't contain localecompare is the error I m getting if I just do a.localecompare(b) then it gives only keys of objects no values. How to sort this by getting both key and value

`a.localeCompare` not `response[a].localeCompare`. `response[a]` returns the value for that key, which is an array. — adiga, Jul 01 '21 at 06:50

Alireza Ahmadi · Answer 1 · 2021-07-01T10:15:11.450

0

First sort your dictionary based on your key by Object.keys(data).sort(); and then use reduce function find whole object based on sorted key.

Like this:

const data = {
            Cutting: [{ display_name: 'abc' }, { display_name: 'cdf' }],
            Facials: [{ display_name: 'sdf' }, { display_name: 'sd' }],
            IPL: [{ display_name: 'sdf' }, { display_name: 'er' }],
            Massage: [{ display_name: 'abc' }, { display_name: 'cdf' }],
            Mens: [{ display_name: 'fg' }],
            Styling: [{ display_name: 'cdf' }],
            highlights: [
                { display_name: 'abc' },
                { display_name: 'yyy' },
                { display_name: 'vvv' },
            ],
        };


         const result = Object.keys(data).sort(
            function (a, b) {
               return a.toLowerCase().localeCompare(b.toLowerCase());
         }
         ).reduce((r, k) => (r[k] = data[k], r), {});

        console.log(result);

edited Jul 01 '21 at 10:15

answered Jul 01 '21 at 06:53

Alireza Ahmadi

7,635
4
11
32

`Highlights` is not uppercased in the question – adiga Jul 01 '21 at 08:07
@vikashbhorale `Highlights` must be lowercase and still ignore case sensitive in sorting? – Alireza Ahmadi Jul 01 '21 at 08:33
1

yes highlight is lowercase which is why it's not working – vikashbhorale Jul 01 '21 at 09:58
highlights should be in lowercase and it should sort – vikashbhorale Jul 01 '21 at 09:59
@vikashbhorale Ok I updated my answer to apply your request. Please check – Alireza Ahmadi Jul 01 '21 at 10:17
Note that you can also use `a.localeCompare(b, 'en', {'sensitivity': 'base'})` to sort in a **case-insensitive** way – Alireza Ahmadi Jul 01 '21 at 10:23
1

its working thank you so much – vikashbhorale Jul 01 '21 at 10:53

sort objects alphabetically ignoring the lower and uppercase letters in Angular

1 Answers1