How to sort an array in a particular order in Javascript

Question

I have an associative array that I need to sort in a particular order. Each object has a description key. Here is the current array I want to rearrange.

[{
    id: "1",
    permission: "Administer Source List",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "2",
    permission: "Administer Common Layers",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "7",
    permission: "Create Campaigns",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "8",
    permission: "Access/modify campaign setup",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "*",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "11",
    permission: "View Reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "*",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "12",
    permission: "Modify prebuilt reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "16",
    permission: "Create portfolio",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "17",
    permission: "Access all portfolios (at org)",
    description: "APT",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "*",
    UserAdmin: ""
  },
  {
    id: "20",
    permission: "Administer role templates for org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "21",
    permission: "Add/edit/delete non org-admin users at org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: "*"
  },
  {
    id: "25",
    permission: "Administer organizations & survey programs",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "26",
    permission: "Administer all users in system",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Data Source",
    description: "Data Source",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Campaigns",
    description: "Campaigns",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Reports",
    description: "Reports",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "APT",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Manage Users",
    description: "Manage Users",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "ABC Admin functions",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  }
];

I want to resort the array to be like this:

[{
    permission: "Data Source",
    description: "Data Source",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "1",
    permission: "Administer Source List",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "2",
    permission: "Administer Common Layers",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Campaigns",
    description: "Campaigns",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "7",
    permission: "Create Campaigns",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "8",
    permission: "Access/modify campaign setup",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "*",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Reports",
    description: "Reports",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "11",
    permission: "View Reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "*",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "12",
    permission: "Modify prebuilt reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "APT",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "16",
    permission: "Create portfolio",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "17",
    permission: "Access all portfolios (at org)",
    description: "APT",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "*",
    UserAdmin: ""
  },
  {
    permission: "Manage Users",
    description: "Manage Users",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "20",
    permission: "Administer role templates for org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "21",
    permission: "Add/edit/delete non org-admin users at org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: "*"
  },
  {
    permission: "ABC Admin functions",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "25",
    permission: "Administer organizations & survey programs",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "26",
    permission: "Administer all users in system",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  }
];

Is there away I can use the description key to make this happen?

Is there a way? Yes. Its not right to say but a user with your rep should know how to ask question. — Rajesh Dixit
– Rajesh Dixit, Commented Aug 23, 2018 at 5:42
Yes of course. It looks like you want to sort on description and ID? In which case you need two sorts. — Bruno
– Bruno, Commented Aug 23, 2018 at 5:44

amrender singh · Accepted Answer · 2018-08-23 05:44:41Z

You can make a map of descriptions and their order. Use that map in your sort comparator , Try the following:

let arr = [ { id: "1", permission: "Administer Source List", description: "Data Source", OrgAdmin: "*", DataAdmin: "*", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "2", permission: "Administer Common Layers", description: "Data Source", OrgAdmin: "*", DataAdmin: "*", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "7", permission: "Create Campaigns", description: "Campaigns", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "8", permission: "Access/modify campaign setup", description: "Campaigns", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "*", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "11", permission: "View Reports", description: "Reports", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "*", APTUser: "", UserAdmin: "" }, { id: "12", permission: "Modify prebuilt reports", description: "Reports", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "16", permission: "Create portfolio", description: "APT", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "17", permission: "Access all portfolios (at org)", description: "APT", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "*", UserAdmin: "" }, { id: "20", permission: "Administer role templates for org", description: "Manage Users", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "21", permission: "Add/edit/delete non org-admin users at org", description: "Manage Users", OrgAdmin: "*", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "*" }, { id: "25", permission: "Administer organizations & survey programs", description: "ABC Admin functions", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { id: "26", permission: "Administer all users in system", description: "ABC Admin functions", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "Data Source", description: "Data Source", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "Campaigns", description: "Campaigns", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "Reports", description: "Reports", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "APT", description: "APT", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "Manage Users", description: "Manage Users", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" }, { permission: "ABC Admin functions", description: "ABC Admin functions", OrgAdmin: "", DataAdmin: "", SetupAdmin: "", DataConsumer: "", APTUser: "", UserAdmin: "" } ];
let map = {
  "Data Source"  : 1,
  "Campaigns" : 2,
  "Reports" : 3,
  "APT" : 4,
  "Manage Users" : 5,
  "ABC Admin functions" : 6,
};

arr.sort((a,b) => map[a.description] - map[b.description]);
console.log(arr);

caedmon · Accepted Answer · 2018-08-23 05:44:48Z

0

As mentioned in the other answer, you can use Array.sort(). If all you care about is description you could do:

myArray.sort((a, b) => a.description < b.description ? -1 : 1)

You can make the sort function more complex if it is necessary to consider other keys.

answered Aug 23, 2018 at 5:44

caedmon

1067 bronze badges

Comments

BlizZard · Accepted Answer · 2018-08-23 05:48:17Z

You need a function, that will take key value as description or whichever key value you want, and sort the whole data accordingly.

in html call as

<button onClick="sortData('description')" >Click To Sort</button>
<button onClick="sortData('id')" >Click To Sort</button>
<button onClick="sortData('permission')" >Click To Sort</button>
<button onClick="sortData('userAdmin')" >Click To Sort</button>

and add this function to .js

sortData(key: any) {
this.data.sort(function (name1, name2) {
  if (name1[key] > name2[key]) {
    return -1;
  } else if (name1[key] < name2[key]) {
    return 1;
  } else {
    return 0;
  }
});
}

this will sort the array , and where ever you want, display the array after its sorted after the click.

Mohit Bhardwaj · Accepted Answer · 2018-08-23 05:55:18Z

You can use Array.sort and pass it a custom sorter function to sort any type of items either on its own value (if it's a number or a string) or on any of its keys (if the items are objects).

The sort() method sorts the elements of an array in place and returns the array. The sort is not necessarily stable. The default sort order is according to string Unicode code points.

To customise behaviour of sort() method, we can pass it a sorter function. This sorter function accepts 2 parameters, which represent the elements from the array. We need to return -1, 1 or 0 in this sorter function, where 1 indicates that the first element should be placed before the second element, -1 indicates that second element should be placed before the second and 0 indicates that both elements can be considered equal.

var unsortedArray = [
  {
    id: "1",
    permission: "Administer Source List",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "2",
    permission: "Administer Common Layers",
    description: "Data Source",
    OrgAdmin: "*",
    DataAdmin: "*",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "7",
    permission: "Create Campaigns",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "8",
    permission: "Access/modify campaign setup",
    description: "Campaigns",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "*",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "11",
    permission: "View Reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "*",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "12",
    permission: "Modify prebuilt reports",
    description: "Reports",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "16",
    permission: "Create portfolio",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "17",
    permission: "Access all portfolios (at org)",
    description: "APT",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "*",
    UserAdmin: ""
  },
  {
    id: "20",
    permission: "Administer role templates for org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "21",
    permission: "Add/edit/delete non org-admin users at org",
    description: "Manage Users",
    OrgAdmin: "*",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: "*"
  },
  {
    id: "25",
    permission: "Administer organizations & survey programs",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    id: "26",
    permission: "Administer all users in system",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Data Source",
    description: "Data Source",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Campaigns",
    description: "Campaigns",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Reports",
    description: "Reports",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "APT",
    description: "APT",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "Manage Users",
    description: "Manage Users",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  },
  {
    permission: "ABC Admin functions",
    description: "ABC Admin functions",
    OrgAdmin: "",
    DataAdmin: "",
    SetupAdmin: "",
    DataConsumer: "",
    APTUser: "",
    UserAdmin: ""
  }
];

// array is not sorted yet
// console.log( unsortedArray );

unsortedArray.sort(function(a, b){
  // this is the custom sorter function
  return a['description'].localeCompare(b['description']);
});

// array should now be sorted
console.log( unsortedArray );

Collectives™ on Stack Overflow

How to sort an array in a particular order in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related