title: ugly nested forEach in javascript best practise
body: <p>Hi my code feels very hacky, i could do the same with forloop which would be better for performance but it will look even more horrible. Is there a cleaner/best practise way of doing this?</p>
  
  <p>this is my datamodel</p>
  
  <pre><code>this.data = [
    {
      title: 'Math',
      img: this.mathImage,
      children: [
        {
          title: 'Calculus I &amp; II',
          open: false,
          children: [
            {
              title: 'Differentials',
              open: false,
              children: [
                {
                  title: 'Integration by parts',
                  key: 'Differentials1',
                  mainsub: 'Math',
                  middlesub: 'Calculus I &amp; II',
                  lowsub: 'Differentials',
                  saved: true // &lt;--------------- HERE IS THE PROPERTY
                },
                {
                  title: 'Integration by parts',
                  key: 'Differentials2',
                  mainsub: 'Math',
                  middlesub: 'Calculus I &amp; II',
                  lowsub: 'Differentials',
                  saved: true,
                },
              ]
            }
          ]
        }
      ]
    }
  ]
  </code></pre>
  
  <p>this is my code that sets the 'saved' property to false</p>
  
  <pre><code>removeFromFavoritesinSubjects(item) {
    this.data.forEach(list =&gt; {
      if (list.title === item.mainsub) {
        list.children.forEach(subitem =&gt; {
          if (subitem.title === item.middlesub) {
            subitem.children.forEach(items =&gt; {
              if (items.title === item.lowsub) {
                items.children.forEach(i =&gt; {
                  if (i.key === item.key) {
                    i.saved = false;
                  }
                })
              }
            })
          }
        })
      }
    })
  } 
  </code></pre>