title: javascript http get request does not wait for the response
body: <p>I'm doing basic programming with js+html+css
  I want to create a simple webpage to represent Starwars movie ship details.
  Simply, each ship object which is returned upon the get request to the <a href="https://swapi.dev/api/starships/" rel="nofollow noreferrer">https://swapi.dev/api/starships/</a> consists of several strings and an array of URL where each URL will return another JSON where the title attribute of that JSON is the movie name. For example, one of the film URLs is <a href="https://swapi.dev/api/films/1/" rel="nofollow noreferrer">https://swapi.dev/api/films/1/</a></p>
  <p>Ok. I have successfully received all ships and their strings. But for the film part, I have a problem.
  To make the question short, this is the code I run to get my films:</p>
  <pre><code>for (let i=0;i&lt;details[l].films.length;i++)
  {
      var filmName = document.createElement(&quot;div&quot;);
      var s =getFilmName(details[l].films[i])
      alert(&quot;on retuern &quot;+s+&quot; type &quot;+typeof(s))
      filmName.innerHTML=s
      rightContainer.appendChild(filmName)
  }
  </code></pre>
  <p>where <code>details[l].films</code> is itself an array of URLs. right container is the container where I want to store and show the film names, but it's not important here.</p>
  <pre><code>function getFilmName(url) {
  console.log(url+ &quot; the url&quot;)
  const Http = new XMLHttpRequest();
  Http.open(&quot;GET&quot;, url);
  Http.send();
  
  
  
  Http.onreadystatechange = function (){
      if (this.status == 200 &amp;&amp; this.readyState==4){
  
          response=JSON.parse(Http.responseText)
          let s=&quot;&quot;
          s=s+response.title
          alert(&quot;s is &quot;+s+ &quot; &quot;+typeof(s))
          alert(response.title+ &quot; &quot;+typeof (response.title) + &quot; name and title &quot;)
          return s
  
          }
      }
  }
  </code></pre>
  <p>This function sends GET request to a single film URL, and parses and returns it's title.
  The problem now is that when I call <code>getFilmName</code> function on the top for loop, I get the return value undefined! and earlier than <code>getFilmName</code> receives the JSON and parses it. that is, <code>getFilmName</code> successfully receives the film name, but it's caller will continue executing and receives <code>Undifined</code> first, while a couple seconds later <code>getFilmName</code> correctly alerts the received film name.
  I even tried to make the GET request syncrhounous, by adding <code>open(&quot;GET&quot;,URL,false)</code> but it didn't work.
  How can I force the caller to wait until the result is ready and then move on?</p>