title: How to filter out duplicate names with returned JSON data
body: <p><a href="https://i.stack.imgur.com/POmDe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/POmDe.png" alt="enter image description here"></a>I have multiple same name data from a JSON response. I'm looking to write a function that will filter out the same name data on my options list.</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>       const select = document.getElementById('brand');
  /**===============Fetch requests=========== */
  
          fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
          .then((resp) =&gt; resp.json())
          .then(function(data) {
              let products = data;
              return products.map(function(product) {
              console.log(product.brand);
            })
          })
          .catch(function(error) {
            console.log(error);
          });
  
          fetch("http://makeup-api.herokuapp.com/api/v1/products.json")
           .then((resp) =&gt; resp.json())
          .then((resp) =&gt; generateOptions(resp))
  
  /*===========Helper Functions====================== */
        function generateOptions(data) {
          let products = data;
          const options = products.map(item =&gt; `
            &lt;option value='${item.brand}'&gt;${item.brand}&lt;/option&gt;
          `).join('');
          select.innerHTML = options;
          
        }</code></pre>
  </div>
  </div>
  </p>