{"id":466,"date":"2020-08-22T15:57:56","date_gmt":"2020-08-22T15:57:56","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=466"},"modified":"2020-08-26T09:52:51","modified_gmt":"2020-08-26T09:52:51","slug":"sort-array-of-objects-by-property-value-in-javascript","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/sort-array-of-objects-by-property-value-in-javascript\/","title":{"rendered":"Sort Array of Objects by Property Value in JavaScript"},"content":{"rendered":"\n<p>In this article I will discuss about how to sort array of objects by property or key value. Consider the following array of objects:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj = [ \n    { name: 'Ravi', age: 20 },\n    { name: 'Ajay', age: 55 },\n    { name: 'Henry', age: 15 }\n];<\/code><\/pre>\n\n\n\n<p>Suppose you want to sort the array of objects by key <strong><code>name<\/code><\/strong> or <strong><code>age<\/code><\/strong> value as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Sorted by name value\n[ \n    { name: 'Ajay', age: 55 },\n    { name: 'Henry', age: 15 },\n    { name: 'Ravi', age: 20 }\n];\n\n\/\/ Sorted by age value\n[ \n    { name: 'Henry', age: 15 },\n    { name: 'Ravi', age: 20 },\n    { name: 'Ajay', age: 55 }\n];<\/code><\/pre>\n\n\n\n<p>Let&#8217;s define a function say,  <strong><code>sortByKey(array, string, boolean)<\/code><\/strong>  for this purpose. The function will accepts three arguments &#8211; <strong>array of object<\/strong> to be sorted, string <strong>property name<\/strong> by the value of which it should be sorted and the <strong>order<\/strong> in which the value should be sorted. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function sortByKey (arrayOfObjects, prop, isAsc) {\n    return arrayOfObjects.sort(function(a, b){\n         return (a[prop] &lt; b[prop] ? -1 : 1) * (isAsc ? 1 : -1)\n    });\n}<\/code><\/pre>\n\n\n\n<p>The third argument <strong>isAsc<\/strong> accepts boolean <code>true<\/code> or <code>false<\/code>. Pass true for ascending order, false for descending order. Checkout the following examples: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj = [ \n    { name: 'Ravi', age: 20 },\n    { name: 'Ajay', age: 55 },\n    { name: 'Henry', age: 15 }\n];\n\n\/\/ Sort by name in ascending order\nvar sorted1 = sortByKey(obj, 'name', true);\nconsole.log(sorted1);\n\/\/ Output:\n[{\"name\":\"Ajay\",\"age\":55},{\"name\":\"Henry\",\"age\":15},{\"name\":\"Ravi\",\"age\":20}] \n\n\/\/ Sort by name in descending order\nsorted2 = sortByKey(obj, 'name', false);\nconsole.log(sorted2);\n\/\/ Output:\n[{\"name\":\"Ravi\",\"age\":20},{\"name\":\"Henry\",\"age\":15},{\"name\":\"Ajay\",\"age\":55}]\n\n\/\/ Sort by age in ascending order\nsorted3 = sortByKey(obj, 'age', true);\nconsole.log(sorted3);\n\/\/ Output:\n[{\"name\":\"Henry\",\"age\":15},{\"name\":\"Ravi\",\"age\":20},{\"name\":\"Ajay\",\"age\":55}]<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/datatype.co.in\/code-editor\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Try yourself (opens in a new tab)\">Try yourself<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article I will discuss about how to sort array of objects by property or key value. Consider the following array of objects: Suppose you want to sort the&nbsp;[ &hellip; ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[177,176,100,174,175,172,171],"class_list":["post-466","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-array-of-objects","tag-javascript","tag-js-interview-question","tag-key","tag-property","tag-sort","tag-sort-array-of-objects-in-javascript","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":16,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions\/482"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}