Question

大家好，首先我想声明自己是json和javascript的新手。我正在用html和CSS创建一个Blogspot，我想从json文件中获取文章的数据。现在，我已经制作了一个JSON文件，其中存储了一些数据。

content.json

articles = {
"blackHeli" : "black helicopters covered the sea..",
"jfk": "the assassination of kennedy..."}

现在，我想制作一个JavaScript文件，以获取此数据并将其显示为HTML。我看到了一些示例，但我认为这对我的编程水平来说非常复杂。其中之一就是这段代码

function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
        callback(rawFile.responseText);
    }
}
rawFile.send(null);
}
//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
var data = JSON.parse(text);
console.log(data);
});

有没有更简单的方法可以使用javascript制作文件阅读器并将其显示在我的Blogspot中？

感谢您的时间:)

Answer 1

这可能会帮助您：

（这些文章是一个javascript对象，不在json文件中）

const articles = {
  "blackHeli" : "black helicopters covered the sea..",
  "jfk": "the assassination of kennedy..."
}
Object.keys(articles).forEach(function (articleName) {
  const articleDiv = document.createElement('div');
  articleDiv.innerHTML = `
    <h1>${articleName}</h1>
    <p>${articles[articleName]}</p>
  `
  document.body.appendChild(articleDiv)
})

基本上是一个循环，该循环创建一个元素（articleDiv），其中包含两个元素，带有标题的h1和带有内容的p。

articleName：指文章名称
articles [articleName]：指文章内容
articleDiv：指文章元素

希望这对您有所帮助：）

Javascript读取JSON文件，然后以HTML显示

1 个答案: