javascript - 读取 JSON 并在 HTML 中实现

Question

首先，抱歉我的英语不好，不是最好的 ;)

所以我是 JavaScript、Ajax 和 jQuery 的新手。从小我就对编码很感兴趣。我的一个 friend 想要更新我刚才为他们制作的网站。他们有一个小型播客/广播电台。

我想做的是在他们发布在 MixCloud 上的播客和他们的网站之间建立一个自动链接。我遵循了一些教程并严重抛出了这个网站上的表格，但是我无法让脚本正常工作，也无法从 MixCloud 使用他们的 API 生成的 JSON 文件中获取信息。

这就是我到目前为止所得到的。我不知道我做错了什么，因为我对此非常陌生。我尝试了不同的方法，但这是我得到的最接近的方法。

const Http = new XMLHttpRequest();
const url = 'https://api.mixcloud.com/itmotr-radio/cloudcasts/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
  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);
});

.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
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="episodes">

  <script type="text/template" id="postTemplate">

    <div class="episode">

      <img class="coverimg" src="">
      <p class="episodetitle"></p>

    </div>

  </script>

</div>

出于某种原因，我无法从 JSON 文件中获取数据，它也不会显示在 HTML 中。我在这篇文章的大量帮助下构建了这个脚本:Populate grid <div> & <p> with JSON data file

有人可以帮助我并让它与我一起工作吗？需要读取的JSON文件为: https://api.mixcloud.com/itmotr-radio/cloudcasts/

Answer 1

有一些事情正在发生，所以我将分别解决每个问题，您可以将它们放在一起作为学习:) 不过您的总体结构还不错，到目前为止进展顺利!

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">/script>

这是旧版本，使用

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

AJAX

const Http = new XMLHttpRequest();
const url='https://api.mixcloud.com/itmotr-radio/cloudcasts/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}

这一切都在 jquery 中自动处理。阅读 AJAX documentation .这是一个很好的学习示例，它非常简单(您可以使用很多默认值)。

$.ajax({
  url:'https://api.mixcloud.com/itmotr-radio/cloudcasts/',
  success:function(data){
    //Do stuff with the data here (as JSON, it should be auto parsed into an object)

    //for example (psuedo code..)
    for(var i = 0; i < data.length;i++){
      //Use the data variable passed in with the success function.
      createNewElement(data[i]) // do something with each object in the array (see below)

    }
})

创建新元素

 var newEpisode = $(template).clone();

 //Populate it
 $(newItem).find(".data.name").html(object.episodetitle);

 var img = $(newItem).find(".data.pictures.320wx320h")
 $(img).attr("src", object.coverimg)

 //Append it
 $(".episodes").append(newEpisode);

因为您已经有了 jquery，我们可以轻松地使用很多功能。我们可以在 jquery 中构建要附加的元素，或者只使用包含 HTML 的 javascript 中的字符串。当您添加动态数据时，制作元素很有意义。

createNewElement(datum){
 // This function creates a new element each time it is called and appends it to the 
 let $para = $('<p></p>') // make new <p> element
  .addClass('episodetitle') // add the class property and actual classes
  .text(thing.episodetitle) // set the text content of the element
//we have created "<p class='episodetitle'>This is the Title</p>"

//Alernatively we can do it all in one go
let $img = $('<img class="coverimg" src="'+datum.imagesource+'"/>') 

// Now we create the container div for these 2 elements
let $newEpisode = $('<div></div>').addClass('episode')

$newEpisode.append($para) // Add the para into our div
  .append($img) // append the image element into the div


$(".episodes").append($newEpisode); // append the div to the coagulate div

}