title: Call a function which is fetching an API and render the return values, problem with Promises
body: <p>In shoppingView.js I want to render a block for every 'item' in 'items', however I get a promise instead of a value from the function call, the format is json. How can I retrieve all the items from the array and render them?
  ---&gt; Check the comment in ShoppingView render()</p>
  <p><em>I know about '.then()', 'async/await' but I'm not sure how to think when dealing with functions returning promises.. Can I force a function to returns a value instead of a promise and let the program wait for it when calling?</em></p>
  <p>I appreciate all help :)</p>
  <p>Semi pseudo code..</p>
  <h1>storeModel.js - Handling api calls etc.</h1>
  <pre><code>class StoreModel {
    constructor() {
      this.items = [];
    } 
  
    getItems() {
      return this.items;
    }
  
    getItem(id) {
      const res = fetch(ENDPOINT + '/grocery/' + id + '/information/', {
        &quot;method&quot;: &quot;GET&quot;,
        &quot;headers&quot;: {
          &quot;Host&quot;: ENDPOINT,
          &quot;Key&quot;: API_KEY,
        }
      })
      .then(res =&gt; {
        if(res.ok) {
          console.log(&quot;SUCCESS&quot;);
          return res.json(); 
        } else {
          console.log(&quot;UNSUCCESSFUL&quot;);
          return res.json()
        }
      })
      .then({
          data =&gt; return data
      })
      .catch(error =&gt; {
          console.log(error);
      });
      return res;
    }
  
    addItem(item) {
      this.items.push(item);
    }
  }
  </code></pre>
  <h1>app.js</h1>
  <pre><code>window.onload = function () {
    const cont = document.body.querySelector(&quot;#container&quot;);
    const model = new StoreModel();
  
    Promise.all([
       model.addItem(model.getItem(1)),
       model.addItem(model.getItem(2)),
       model.addItem(model.getItem(3)),
    ])
    .then(
      new HomeView(cont, model).render();
      new ShoppingView(cont, model).render();
    });
  }
  </code></pre>
  <h1>shoppingView.js</h1>
  <pre><code>class ShoppingView {
    constructor(container, model) {
      this.container = container;
      this.model = model;
    }
  
    render() {
      this.container.appendChild(document.createElement('h3').textContent = &quot;Items&quot;;
      var div = this.container.appendChild(document.createElement('div'));
  
      /* GET THE VALUE OF items HERE */ 
  
      /* I'VE TRIED ********************************
      var items = this.model.getItems();
      ----&gt; item.title etc, is undefined
      **********************************************/
      for(let item of items {
        div.appendChild(document.createElement('img')).setAttribute('src', item.image);
        div.appendChild(document.createElement('h4')).textContent = item.title;
      }
    }
  }
  </code></pre>