{"id":3762,"date":"2020-09-29T22:30:23","date_gmt":"2020-09-30T04:30:23","guid":{"rendered":"http:\/\/benincosa.com\/?p=3762"},"modified":"2020-09-29T22:44:16","modified_gmt":"2020-09-30T04:44:16","slug":"javascript-unique-objects-by-key","status":"publish","type":"post","link":"https:\/\/benincosa.com\/?p=3762","title":{"rendered":"Javascript Unique Objects By Key"},"content":{"rendered":"\n<p>Suppose you have an array of objects in javascript: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;{id: \"a\", foo: \"bar1\"}, {id: \"b\", foo: \"bar2\"}, {id: \"a\", foo: \"bar3\"}]<\/code><\/pre>\n\n\n\n<p>In the above contrived example 2 of the 3 objects have the same <code>id<\/code> value of <code>a<\/code>.  We&#8217;d like to filter this array so that the result is: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;{id: \"a\", foo: \"bar1\"}, {id: \"b\", foo: \"bar2\"}]<\/code><\/pre>\n\n\n\n<p>Javascript doesn&#8217;t have a built in <code>unique<\/code> function like other languages do.  But we can use the <code>filter<\/code> method.  The standard <code>filter<\/code> method we might use would look like this: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const onlyUnique = (value, index, self) => {\n    return self.indexOf(value) === index\n}<\/code><\/pre>\n\n\n\n<p>That function works great on arrays of elements like: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\"a\", \"b\", \"a\"]<\/code><\/pre>\n\n\n\n<p>We can call: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const u = &#91;\"a\", \"b\", \"a\"].filter(onlyUnique);<\/code><\/pre>\n\n\n\n<p>The value of <code>u<\/code> is now assigned the value: <code>[\"a\", \"b\"]<\/code> .  That&#8217;s great, but it won&#8217;t filter on the <code>id<\/code> key like we need it to do. We can make it work by modifying the <code>onlyUnique<\/code> function to take into account our keys: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> const onlyUniqueIds = (value, index, self) => {\n    const k = self.map((m) => m.id);\n    return self.indexOf(value) === k.indexOf(value.id);\n  }<\/code><\/pre>\n\n\n\n<p>Basically, in the above code, we first isolate the <code>id<\/code> key into its own array.  Then we use the basic <code>onlyUnique<\/code> code but instead of comparing to the index, we compare it to the index of the  <code>value.id<\/code> in the new <code>k<\/code> array.  Now we can run this code on our objects: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const uniqueObjects = &#91;{id: \"a\", foo: \"bar1\"}, {id: \"b\", foo: \"bar2\"}].filter(onlyUniqueIds)<\/code><\/pre>\n\n\n\n<p>Now we have our unique array.  Hopefully that helped.  It took me a few minutes to figure this out.  If there is a better way, I&#8217;d love to know about it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Suppose you have an array of objects in javascript: In the above contrived example 2 of the 3 objects have the same id value of a. We&#8217;d like to filter this array so that the result is: Javascript doesn&#8217;t have a built in unique function like other languages do. But we can use the filter&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[946],"tags":[944,948,947],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3762"}],"collection":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3762"}],"version-history":[{"count":2,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3762\/revisions"}],"predecessor-version":[{"id":3764,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3762\/revisions\/3764"}],"wp:attachment":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}