title: Why does my array not immediately update after sending a GET request in JS?
body: <p>My goal is to create a single page email application with Javascript and HTML. The web framework I'm using is Django and according to the project guidelines, I should only be writing JS and HTML(so we can assume everything <em>but</em> my JS and HTML is correct).</p>
  <p>My issue is that after I compose an email in the &quot;compose&quot; section of my app, I should be sent directly to the &quot;sent&quot; section where I can see all the emails I've sent including the one I <em>just</em> sent. For some reason, I'm unable to see the email I just sent. Only when I reload the page does it appear, which is not what I want. The below two snippets of code belongs to a file called <strong>inbox.js</strong>:</p>
  <p><strong>compose_email</strong></p>
  <pre><code>function compose_email() {
      // Show compose view and hide other views
      document.querySelector(&quot;#emails-view&quot;).style.display = &quot;none&quot;;
      document.querySelector(&quot;#compose-view&quot;).style.display = &quot;block&quot;;
  
      const recipients = document.querySelector(&quot;#compose-recipients&quot;);
      const subject = document.querySelector(&quot;#compose-subject&quot;);
      const body = document.querySelector(&quot;#compose-body&quot;);
  
      //   Clear out composition fields
      recipients.value = &quot;&quot;;
      subject.value = &quot;&quot;;
      body.value = &quot;&quot;;
  
      document.querySelector(&quot;form&quot;).onsubmit = function () {
          const recipients = document.querySelector(&quot;#compose-recipients&quot;).value;
          const subject = document.querySelector(&quot;#compose-subject&quot;).value;
          const body = document.querySelector(&quot;#compose-body&quot;).value;
  
          fetch(&quot;/emails&quot;, {
              method: &quot;POST&quot;,
              body: JSON.stringify({
                  recipients: recipients,
                  subject: subject,
                  body: body,
              }),
          })
              .then((response) =&gt; response.json())
              .then((result) =&gt; {
                  //result is just a message to let me know if the email was sent successfully
                  console.log(result);
              });
  
          load_mailbox(&quot;sent&quot;);
          return false;
      };
  }
  </code></pre>
  <p><strong>load_mailbox</strong></p>
  <pre><code>function load_mailbox(mailbox) {
      // Show the mailbox and hide other views
      document.querySelector(&quot;#emails-view&quot;).style.display = &quot;block&quot;;
      document.querySelector(&quot;#compose-view&quot;).style.display = &quot;none&quot;;
  
      // Show the mailbox name
      document.querySelector(&quot;#emails-view&quot;).innerHTML = `&lt;h3&gt;${
          mailbox.charAt(0).toUpperCase() + mailbox.slice(1)
      }&lt;/h3&gt;`;
  
      //this is where I'm having issues
      if (mailbox === &quot;sent&quot;) {
          fetch(&quot;/emails/sent&quot;)
              .then((response) =&gt; response.json())
              .then((emails) =&gt; {
                  //when I console.log(emails) after being directly sent to this function by compose_email I get an array that does not have the email I just sent.
                  console.log(emails);
                  for (var email of emails) {
                      document.querySelector(&quot;#emails-view&quot;).innerHTML += `
                      &lt;div class=&quot;card bg-light&quot;&gt;
                          &lt;div class=&quot;card-body&quot;&gt;
                              &lt;div class=&quot;row&quot;&gt;
                                  &lt;div class=&quot;col-4&quot;&gt;${email.recipients}&lt;/div&gt;
                                  &lt;div class=&quot;col-4&quot;&gt;${email.subject}&lt;/div&gt;
                                  &lt;div class=&quot;col-4&quot;&gt;${email.timestamp}&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      `;
                  }
              });
      }
  }
  </code></pre>