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

Question

大家好，首先我想声明我完全是 json 和 javascript 的新手。 我正在用 html 和 css 制作一个 blogspot，我想从 json 文件中获取文章的数据。现在我制作了一个 JSON 文件，它存储了一些数据，json 文件就是这个。

内容.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 ：指的是文章名称
• 文章[文章名称] : 指文章内容
• articleDiv ：指的是文章元素

希望这对你有帮助:)