title: How to combine duplicates in associative array?
body: <p>What is the most concise and efficient way to find out if a JavaScript array contains duplicates and merge them into new array please ?</p>
  
  <p>I tried Lodash / d3 / underscoreJs but none of them generate clean result so I tried this code -></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arr = [
      {
          "title": "My unique title",
          "link": "domainlinkto-my-unique-title",
          "image": "someurlto/my-unique-title-image",
          "date": "Mon, 29 Jul 2019 02:25:08 -0000",
          "site": "site1"
      },
      {
          "title": "A duplicate title",
          "link": "somedomainlinkto-a-duplicate-title/",
          "image": "randomurlto/a-duplicate-title.jpg",
          "date": "Sun, 25 Aug 2019 15:52:59 -0000",
          "site": "site1"
      },
      {
          "title": "A duplicate title",
          "link": "otherdomainlinkto-a-duplicate-title/",
          "image": "anotherurlto/duplicate-title.jpg",
          "date": "Sun, 25 Aug 2019 21:09:37 -0000",
          "site": "site2"
      },
      {
          "title": "A DUPLICATE TITLE",
          "link": "someotherdomainlinkto-a-duplicate-title/",
          "image": "someurlto/aduplicatetitle.jpg",
          "date": "Sat, 24 Aug 2019 18:43:38 -0000",
          "site": "site3"
      },
      {
          "title": "Other duplicate: title",
          "link": "anydomainlinkto-other-duplicate-title/",
          "image": "anotherdomainurlto/other-duplicate-title.jpg",
          "date": "Mon, 26 Aug 2019 00:37:28 -0000",
          "site": "site2"
      },
      {
          "title": "Other duplicate : title",
          "link": "anyotherdomainlinkto-other-duplicate-title/",
          "image": "exampleurlto/hjKGHK45huu.jpg",
          "date": "Mon, 26 Aug 2019 00:37:28 -0000",
          "site": "site5"
      },
      {
          "title": "Other unique title",
          "link": "anydomainlinkto-other-unique-title/",
          "image": "anyotherurlto/img/other-title.jpg",
          "date": "Mon, 26 Aug 2019 09:18:10 -0000",
          "site": "site3"
      }
          ];
      Array.prototype.groupBy = function (props) {
          var arr = this;
          var partialResult = {};
          var imgResult = {};
          arr.forEach(el=&gt;{
              var grpObj = {};
              var grpImg = {};
          props.forEach(prop=&gt;{
              grpObj.title = el.title;
              grpImg.image = el.image;
          });
          var key = JSON.stringify(grpObj);
          var keyImg = JSON.stringify(grpImg);
          if(!imgResult[key]) {
              imgResult[key] = grpImg.image;
          } else {
              imgResult[key] = el.image;
          }
          if(!partialResult[key]) partialResult[key] = [];
              partialResult[key].push(
              {
              link: el.link,
              site: el.site, 
              date: el.date 
              });
          });
          var finalResult = Object.keys(partialResult, imgResult).map(key=&gt;{
              var keyObj = JSON.parse(key);
              keyObj.links = partialResult[key];
              keyObj.image = imgResult[key];
              return keyObj;
          })
          return finalResult;}
  
      var filtered = arr.groupBy(['title']);
      console.log(filtered);</code></pre>
  </div>
  </div>
  </p>
  
  <p>BUT...
  As you can see [titles] in UPPERCASE and "Other duplicate : title" is not taken as duplicate </p>
  
  <p>WHAT I WOULD DO ---></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var expected = [
      {
          "title": "My unique title",
          "links": [{"date": "Mon, 29 Jul 2019 02:25:08 -0000","site": "site1", "link": "domainlinkto-my-unique-title"}],
          "image": "someurlto/my-unique-title-image",
      },
      {
          "title": "My duplicate title",
          "links": [
       {"date": "Sun, 25 Aug 2019 15:52:59 -0000","site": "site1","link":"somedomainlinkto-a-duplicate-title/"},
       {"date": "Sun, 25 Aug 2019 21:09:37 -0000","site": "site2","link": "otherdomainlinkto-a-duplicate-title/"},
       {"date": "Sat, 24 Aug 2019 18:43:38 -0000","site": "site3","link": "someotherdomainlinkto-a-duplicate-title/"}
       ],
          "image": "randomurlto/a-duplicate-title.jpg",
      },
      {
          "title": "Other duplicate: title",
          "links": [
       {"date": "Sun, 25 Aug 2019 15:52:59 -0000","site": "site2","link":"anydomainlinkto-other-duplicate-title/"},
       {"date": "Mon, 26 Aug 2019 00:37:28 -0000","site": "site5","link": "anyotherdomainlinkto-other-duplicate-title/"}
       ],
          "image": "anotherdomainurlto/other-duplicate-title.jpg",
      },
      {
          "title": "Other unique title",
          "links": [{"date": "Mon, 26 Aug 2019 09:18:10 -0000","site": "site1", "link": "anydomainlinkto-other-unique-title/"}],
          "image": "anyotherurlto/img/other-title.jpg",
          "site": "site3"
      }
  ];
  console.log(expected);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hi Genious</p>
  
  <p>What is the most concise and efficient way to find out if a JavaScript array contains duplicates and merge them into new array please ?</p>
  
  <p>I tried Lodash / d3 / underscoreJs but none of them generate clean result so I tried this code -></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arr = [
      {
          "title": "My unique title",
          "link": "domainlinkto-my-unique-title",
          "image": "someurlto/my-unique-title-image",
          "date": "Mon, 29 Jul 2019 02:25:08 -0000",
          "site": "site1"
      },
      {
          "title": "A duplicate title",
          "link": "somedomainlinkto-a-duplicate-title/",
          "image": "randomurlto/a-duplicate-title.jpg",
          "date": "Sun, 25 Aug 2019 15:52:59 -0000",
          "site": "site1"
      },
      {
          "title": "A duplicate title",
          "link": "otherdomainlinkto-a-duplicate-title/",
          "image": "anotherurlto/duplicate-title.jpg",
          "date": "Sun, 25 Aug 2019 21:09:37 -0000",
          "site": "site2"
      },
      {
          "title": "A DUPLICATE TITLE",
          "link": "someotherdomainlinkto-a-duplicate-title/",
          "image": "someurlto/aduplicatetitle.jpg",
          "date": "Sat, 24 Aug 2019 18:43:38 -0000",
          "site": "site3"
      },
      {
          "title": "Other duplicate: title",
          "link": "anydomainlinkto-other-duplicate-title/",
          "image": "anotherdomainurlto/other-duplicate-title.jpg",
          "date": "Mon, 26 Aug 2019 00:37:28 -0000",
          "site": "site2"
      },
      {
          "title": "Other duplicate : title",
          "link": "anyotherdomainlinkto-other-duplicate-title/",
          "image": "exampleurlto/hjKGHK45huu.jpg",
          "date": "Mon, 26 Aug 2019 00:37:28 -0000",
          "site": "site5"
      },
      {
          "title": "Other unique title",
          "link": "anydomainlinkto-other-unique-title/",
          "image": "anyotherurlto/img/other-title.jpg",
          "date": "Mon, 26 Aug 2019 09:18:10 -0000",
          "site": "site3"
      }
          ];
      Array.prototype.groupBy = function (props) {
          var arr = this;
          var partialResult = {};
          var imgResult = {};
          arr.forEach(el=&gt;{
              var grpObj = {};
              var grpImg = {};
          props.forEach(prop=&gt;{
              grpObj.title = el.title;
              grpImg.image = el.image;
          });
          var key = JSON.stringify(grpObj);
          var keyImg = JSON.stringify(grpImg);
          if(!imgResult[key]) {
              imgResult[key] = grpImg.image;
          } else {
              imgResult[key] = el.image;
          }
          if(!partialResult[key]) partialResult[key] = [];
              partialResult[key].push(
              {
              link: el.link,
              site: el.site, 
              date: el.date 
              });
          });
          var finalResult = Object.keys(partialResult, imgResult).map(key=&gt;{
              var keyObj = JSON.parse(key);
              keyObj.links = partialResult[key];
              keyObj.image = imgResult[key];
              return keyObj;
          })
          return finalResult;}
  
      var filtered = arr.groupBy(['title']);
      console.log(filtered);</code></pre>
  </div>
  </div>
  </p>
  
  <p>BUT...
  As you can see [titles] in UPPERCASE and "Other duplicate : title" is not taken as duplicate </p>
  
  <p>WHAT I WOULD DO ---></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[
      {
          "title": "My unique title",
          "links": [{"date": "Mon, 29 Jul 2019 02:25:08 -0000","site": "site1", "link": "domainlinkto-my-unique-title"}],
          "image": "someurlto/my-unique-title-image",
      },
      {
          "title": "My duplicate title",
          "links": [
       {"date": "Sun, 25 Aug 2019 15:52:59 -0000","site": "site1","link":"somedomainlinkto-a-duplicate-title/"},
       {"date": "Sun, 25 Aug 2019 21:09:37 -0000","site": "site2","link": "otherdomainlinkto-a-duplicate-title/"},
       {"date": "Sat, 24 Aug 2019 18:43:38 -0000","site": "site3","link": "someotherdomainlinkto-a-duplicate-title/"}
       ],
          "image": "randomurlto/a-duplicate-title.jpg",
      },
      {
          "title": "Other duplicate: title",
          "links": [
       {"date": "Sun, 25 Aug 2019 15:52:59 -0000","site": "site2","link":"anydomainlinkto-other-duplicate-title/"},
       {"date": "Mon, 26 Aug 2019 00:37:28 -0000","site": "site5","link": "anyotherdomainlinkto-other-duplicate-title/"}
       ],
          "image": "anotherdomainurlto/other-duplicate-title.jpg",
      },
      {
          "title": "Other unique title",
          "links": [{"date": "Mon, 26 Aug 2019 09:18:10 -0000","site": "site1", "link": "anydomainlinkto-other-unique-title/"}],
          "image": "anyotherurlto/img/other-title.jpg",
          "site": "site3"
      }
  ];</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm sure this is not the better way to do that (we are agree) so I'm asking stackoverflow genious... </p>
  
  <p>Thanks for reading and time spent for thinking about my problem</p>