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

Question

Hello guys first i want to declare that i am completly newbie with json and with javascript too. I am making a blogspot with html and css and i want get the data of the articles from a json file.Now I've made a JSON file which stores some data the json file is this.

content.json

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

Now i want to make a javascript file which taking this data and displaying it in HTML. I saw some examples but i thought that it was very complex for my programming level.One of them is this block of code

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);
});

There is any simpler way to make a file reader with javascript and displaying this in my blogspot?

Thanks for your time :)

Answer 1

This might help you:

(The articles is a javascript object, not located in a json file)

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

It's basically a loop which creates an element (articleDiv) with two elements inside it, the h1 with it's title, and the p with it's content.

• articleName : refers to the Article name
• articles[articleName] : refers to the Article content
• articleDiv : refers to the article element

Hope this helps you :)