title: Cannot read property 'filter' of undefined error
body: <p>So first of all, I'm working with a JSON but I can't seem to put it here in my snippet so I'll just explain what I'm trying to do:</p>
  
  <p>When you load the page it shows a collection of 5 phones and it has a validation form with a select and a submit. In the select there are options with the unique brands of the phones. If I select 'iPhone' for example i only want the phones with the brand 'iPhone' to show.</p>
  
  <p>Everything works untill now but if i try to filter the list i get an error 'Cannot read property filter of undefined', i suppose because i return null but i can't seem to figure out the solution. I did some research and saw this question was already asked multiple times but i still can't find how to do it myself in this code of mine.</p>
  
  <p>Any help would be useful thanks!</p>
  
  <p>I am working with es6 btw:</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>{
    let phones;
  
    const initValidation = () =&gt; {
      const $form = document.querySelector(`form`);
      $form.noValidate = true;
      $form.addEventListener(`submit`, handleSubmitForm);
    }
  
    const handleSubmitForm = e =&gt; {
      const $form = e.target;
      e.preventDefault();
      if($form.checkValidity()){
        const filteredPhones = getFilteredPhones();
        createPhone(filteredPhones);
      }
    };
  
    const getFilteredPhones = () =&gt; {
      const brand = document.querySelector(`.brands`).value;
      return phones.filter(phone =&gt; phone.brand == brand);
    };
  
    const setBrandOptions = brands =&gt; {
      const $select = document.querySelector(`.brands`);
      brands.sort().forEach(brand =&gt; {
        const $option = document.createElement(`option`);
        $option.value = brand;
        $option.textContent = brand;
        $select.appendChild($option);
      });
    };
  
    const getUniqueBrands = phones =&gt; {
      const uniqueBrands = [];
      // for (let i = 0; i &lt; phones.length; i++) {
      //   if (!uniqueBrands.includes(phones[i].brand)){
      //     uniqueBrands.push(phones[i].brand);
      //     console.log(phones[i].brand);
      //   }
      // }
      phones.forEach(phone =&gt; {
        if(!uniqueBrands.includes(phone.brand)){
          uniqueBrands.push(phone.brand);
          console.log(phone.brand);
        }
      });
      return uniqueBrands;
    };
  
  
    const createPhone = phones =&gt; {
      const $div = document.createElement(`div`);
      document.querySelector(`section`).appendChild($div);
  
      const $img = document.createElement(`img`);
      $img.setAttribute('src', phones.image);
      $div.appendChild($img);
  
      const $title = document.createElement(`h2`);
      $title.textContent = phones.name;
      $div.appendChild($title);
  
      const $ul = document.createElement(`ul`);
      $div.appendChild($ul);
      $librand = document.createElement(`li`);
      $librand.textContent = phones.brand;
      $ul.appendChild($librand);
      $liyear = document.createElement(`li`);
      $liyear.textContent = phones.year;
      $ul.appendChild($liyear);
    };
  
    const parseJSON = phones =&gt; {
      console.log(phones);
      phones.forEach(phone =&gt; createPhone(phone));
      const brands = getUniqueBrands(phones);
      setBrandOptions(brands);
    };
  
    const initJSON = () =&gt; {
      const url = "assets/data/phones.json";
      fetch(url)
        .then(r =&gt; r.json())
        .then(jsonObject =&gt; parseJSON(jsonObject));
    };
  
    const init = () =&gt; {
      initJSON();
      initValidation();
    };
  
    init();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  section{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
  }
  div{
    display: flex;
    flex-direction: column;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  h1{
    border-bottom: .1rem solid black;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-bottom: 3rem;
  }
  img{
    margin-bottom: 1rem;
    height: 100%;
    width: 100%;
  }
  h2{
    font-family: sans-serif;
    margin-left: 1rem;
    font-size: 1.3rem;
  }
  ul{
    margin-left: 1rem;
  }
  select{
    margin-bottom: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;My Phone Collection&lt;/h1&gt;
      &lt;form action=""&gt;
     &lt;label for="brands"&gt;Brand:
     &lt;select id="brands" class="brands input"&gt;
          &lt;option value="All"&gt;All&lt;/option&gt;
        &lt;/select&gt;
     &lt;span class="error"&gt;&lt;/span&gt;
     &lt;/label&gt;
  
     &lt;button type="submit"&gt;Search&lt;/button&gt;
   &lt;/form&gt;
      &lt;section&gt;&lt;/section&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>