title: Read JSON and implement it in HTML
body: <p>First of all, sorry for my bad English, isn't the best ;)</p>
  
  <p>So I'm new to working with JavaScript, Ajax and, jQuery. Since a young age I've been interested in coding. A friend of mine wants an update on their website I made for them a little while ago. They have a small podcast/radio station.</p>
  
  <p>What I'm trying to do is make an automatic link between the podcasts they post on MixCloud and their website. I followed some tutorials and grave throw the forms on this website, but I can't get the script to work properly and get the information out of the JSON file that MixCloud makes with their API.</p>
  
  <p>This is what I've got so far. I can't figure out what I'm doing wrong since I'm very very new to this. I tried different methods, but this is the closest I've got.</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>const Http = new XMLHttpRequest();
  const url = 'https://api.mixcloud.com/itmotr-radio/cloudcasts/';
  Http.open("GET", url);
  Http.send();
  Http.onreadystatechange = (e) =&gt; {
    console.log(Http.responseText)
  }
  
  function append_json(XMLHttpRequest) {
  
    //Set Up the template
    var s = $("#postTemplate")[0].innerHTML.trim();
    var holder = document.createElement('div');
    holder.innerHTML = s;
    var template = holder.childNodes;
  
    var episode = document.getElementById('episodes');
    Object.keys(XMLHttpRequest).forEach(function(object) {
  
      //Clone Template
      var newEpisode = $(template).clone();
  
      //Populate it
      $(newEpisode).find(".data.name").html(object.episodetitle);
  
      var img = $(newItem).find(".data.pictures.320wx320h")
      $(img).attr("src", object.coverimg)
  
      //Append it
      $(".episodes").append(newEpisode);
  
    });
  }
  
  $("document").ready(function() {
    append_json(XMLHttpRequest);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.episodes {
    background: white;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    grid-auto-rows: 370px;
    grid-auto-flow: dense;
    justify-content: center;
    padding-top: 10px;
  }
  
  .episode {
    background: rgb(255, 255, 255);
    border: 1px solid grey;
    text-align: center;
  }
  
  .episodetitle {
    font-size: 20px;
    color: red
  }
  
  .coverimg {
    width: 320px;
    max-height: 320px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="episodes"&gt;
  
    &lt;script type="text/template" id="postTemplate"&gt;
  
      &lt;div class="episode"&gt;
  
        &lt;img class="coverimg" src=""&gt;
        &lt;p class="episodetitle"&gt;&lt;/p&gt;
  
      &lt;/div&gt;
  
    &lt;/script&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For some reason, I can't get the data out of the JSON file and it won't show in the HTML. I built this script with a lot of help from this article: <a href="https://stackoverflow.com/questions/52376527/populate-grid-div-p-with-json-data-file/52376863#">Populate grid &lt;div&gt; &amp; &lt;p&gt; with JSON data file</a></p>
  
  <p>Can someone help me out and get it working with me?
  The JSON file that needs to be read is:
  <a href="https://api.mixcloud.com/itmotr-radio/cloudcasts/" rel="nofollow noreferrer">https://api.mixcloud.com/itmotr-radio/cloudcasts/</a></p>