CODEWITHSUNDEEP
javascriptarrayssorting
Amen Ra
Amen Ra

Reputation: 2851

How to sort an array in a particular order in Javascript

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?

Upvotes: 0

Views: 210

Answers (4)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

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 );

Upvotes: 0

BlizZard
BlizZard

Reputation: 589

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.

Upvotes: 0

caedmon
caedmon

Reputation: 106

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.

Upvotes: 0

amrender singh
amrender singh

Reputation: 8239

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);

Upvotes: 1

Related Questions