title: How can I filter nested objects and arrays with JavaScript?
body: <p>My use case is something like this.</p>
  
  <ol>
  <li>I have an array that has an object.</li>
  <li>That each object has an array called <code>menu</code></li>
  <li>Again that menu array has objected.</li>
  <li>That each object has an array <code>dish_has_categories</code></li>
  <li>In <code>dish_has_categories</code> array, if there is an object with CategoryId is equal to <code>8</code> I want to filter out that root object.</li>
  </ol>
  
  <p><strong>My original data object</strong></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 data = [{
          menuName: "Hot dogs",
          menu: [
              {
              dishId: '1',
              dish_has_categories: [{
                  CategoryId: '8'
              }]
          },
           {
              dishId: '2',
              dish_has_categories: [{
                  CategoryId: '9'
              }]
          }]
      },
      {
          menuName: "Burgers",
          menu: [{
              dishId: '3',
              dish_has_categories: [{
                  CategoryId: '6'
              }]
          }, {
              dishId: '4',
              dish_has_categories: [{
                  CategoryId: '4'
              }]
          }]
      },
      {
          name: "Drinks",
          menu: []
      }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My expect result is</strong></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>[{
          menuName: "Hot dogs",
          menu: [
              {
              dishId: '1',
              dish_has_categories: [{
                  CategoryId: '8'
              }]
          },
           {
              dishId: '2',
              dish_has_categories: [{
                  CategoryId: '9'
              }]
          }]
      }]
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>what I've done up to now is</p>
  
  <pre><code>const data2 = data.filter(element =&gt; {
      return element.menu.length &gt; 0
  })
  </code></pre>
  
  <p>I have no idea how to deep filter inside nested objects and arrays. Hope my question is clear to you all. </p>