Javascript 阅读JSON并在HTML中实现它

首先，对不起，我的英语不好，这不是最好的；）

因此，我对使用JavaScript、Ajax和jQuery还不熟悉。我从小就对编码感兴趣。我的一个朋友想知道我刚才为他们制作的网站的更新。他们有一个小型播客/电台

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

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

consthttp=newXMLHttpRequest（）；
常量url=https://api.mixcloud.com/itmotr-radio/cloudcasts/';
Http.open（“GET”，url）；
Http.send（）；
Http.onreadystatechange=（e）=>{
console.log（Http.responseText）
}
函数append_json（XMLHttpRequest）{
//设置模板
var s=$（“#postTemplate”）[0].innerHTML.trim（）；
var holder=document.createElement（'div'）；
holder.innerHTML=s；
var template=holder.childNodes；
var-eposit=document.getElementById（'epositions'）；
key（XMLHttpRequest）.forEach（函数（对象）{
//克隆模板
var newepoint=$（模板）.clone（）；
//填充它
$（neweposition.find（“.data.name”）.html（object.eposodetitle）；
var img=$（newItem.find（“.data.pictures.320wx320h”）
$（img.attr（“src”，object.coverimg）
//附加它
$（“.scents”）.append（新剧集）；
});
}
$（“文档”）.ready（函数（）{
附加json（XMLHttpRequest）；
});
。剧集{
背景：白色；
显示：网格；
栅隙：10px；
网格模板列：重复（自动拟合，最小值（320px，380px））；
网格自动行：370px；
网格自动流动：稠密；
证明内容：中心；
填充顶部：10px；
}
.插曲{
背景：rgb（255、255、255）；
边框：1px纯灰；
文本对齐：居中；
}
1.书名{
字体大小：20px；
颜色：红色
}
.封面{
宽度：320px；
最大高度：320px
}


有几件事正在进行，所以我将分别介绍每件事，您可以将它们放在一起作为学习：）不过您的总体结构还不错，到目前为止做得不错

jquery

/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中自动完成。读一读这本书。这是一个很好的学习示例，非常简单（可以使用很多默认值）

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

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

}

createNewElement（基准面）{
//此函数在每次调用新元素时创建新元素，并将其附加到
让$para=$（'
'）//创建新的元素
.addClass（'eposodeTitle'）//添加类属性和实际类
.text（thing.eposodetitle）//设置元素的文本内容
//我们已经创建了“
这是标题
”
//实际上，我们可以一次完成这一切
设$img=$（''）
//现在我们为这两个元素创建容器div
设$newSpoint=$（''）.addClass（'Spoint'）为
$newSpoint.append（$para）//将para添加到我们的div中
.append（$img）//将image元素追加到div中
$（“.scents”）.append（$newscents）；//将div附加到凝血div
}
@Tobin

因此，现在我将脚本编辑为：


$.ajax({
网址：'https://api.mixcloud.com/itmotr-radio/cloudcasts/',
成功：功能（数据）{
//在这里处理数据（作为JSON，它应该自动解析为对象）
var newepoint=$（模板）.clone（）；
//填充它
$（newItem.find（“.data.name”）.html（object.eposodetitle）；
var img=$（newItem.find（“.data.pictures.320wx320h”）
$（img.attr（“src”，object.coverimg）
让$para=$（'
'）.addClass（'epiodetitle'）.text（thing.epiodetitle）
设$newSpoint=$（''）.addClass（'Spoint'）为
$neweposion.append（$para）
//获取错误：28未捕获的语法错误：已声明标识符“$para”。尝试对coverimg执行相同操作时。
让$para=$（'
'）.addClass（'coverimg'）.text（thing.coverimg）
让$newSpoint=$（''）.addClass（'coverimg'））
$neweposion.append（$para）
//附加它
$（“.scents”）.append（新剧集）；
}
})
Object.keys（XMLHttpRequest）.forEach
毫无意义，您将异步调用视为同步调用
newItem
未在您提供的代码中声明。实现了一些代码，但它不起作用。我已经在这里发布了我是如何做到这一点的！谢谢你的帮助：）你能粘贴一个你正在加载的json的例子吗？这是链接：，不能发布示例，因为它太长了！我已经编辑了我的答案，以便更清楚地回答您上面的问题。。。如果有帮助，你能把它标记为已回答吗！
 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);

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

}