title: fetch returns undefined data sometimes
body: <p>im using fetch to get informations, sometimes it shows everything well, sometimes if shows nothing everything is undefined, and sometimes it shows some data well with some data as undefined. the images shows my issue:</p>
  <p><a href="https://i.stack.imgur.com/QEuZh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QEuZh.png" alt="enter image description here" /></a></p>
  <p>and thats my code:</p>
  <pre><code>// fetch the movies from api
  
  class Movie {
  
    constructor(id) {
      this.id = id;
      this.load();
    }
    finalize(json) {
      this.name = json.original_title;
      this.img = json.poster_path;
      this.link = name.replace(/[^a-zA-Z\s/ ]/g, &quot;&quot;);
      var MyArray = {
        'name': `${this.name}`,
        'img': `${this.img}`,
        'link': `/movies/${this.link}.html`
      }
      console.log(MyArray)
    }
  
    load() {
      fetch(`https://api.themoviedb.org/3/movie/${this.id}?api_key=a913ee104db6b795d20852a9ed989036`)
        .then((res) =&gt; res.json())
        .then((json) =&gt; {
          this.finalize(json)
        })
        .catch(err =&gt; {
          console.error(err);
        });
    }
  
  }
  
  // The array of movies
  
  const MyMovies = [
    new Movie(238),
    new Movie(899082),
    new Movie(899),
  ]
  
  // show the movies in the page
  
  function LoadMovies() {
    var table = document.querySelector('#movies')
    for (var i = 0; i &lt; MyMovies.length; i++) {
      var item = MyMovies[i];
      var row = `&lt;img id=&quot;img&quot; src=&quot;${'https://image.tmdb.org/t/p/w185/' + item.img}&quot; alt=&quot;${item.name}&quot; class=&quot;thumb&quot; onclick=&quot;location.href='${&quot;movies/&quot; + item.link + &quot;.html&quot;}'&quot;&gt;`
      table.innerHTML += row
    }
  }
  </code></pre>