title: How do I display Json API data in html?
body: <p>I'm quite good with html and css but absolutely no experience using javascript. </p>
  
  <p>I want to display the date received from this API into an html page</p>
  
  <p><a href="http://api.travelpayouts.com/data/routes.json?token=PutHereYourToken" rel="nofollow noreferrer">http://api.travelpayouts.com/data/routes.json?token=PutHereYourToken</a></p>
  
  <p>This is how I'm trying without any success until now. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var getJSON = function(url) {
    return new Promise(function(resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open('get', url, true);
      xhr.responseType = 'json';
      xhr.onload = function() {
        var status = xhr.status;
        if (status == 200) {
          resolve(xhr.response);
        } else {
          reject(status);
        }
      };
      xhr.send();
    });
  };
  
  getJSON('https://api.travelpayouts.com/data/routes.json?token=mytoken').then(function(data) {
      alert('Your Json result is:  ' + data.result); 
  
      result.innerText = data.result; 
  }, function(status) { 
    alert('Something went wrong.');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div id="result" style="color:red"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you :)</p>