js如何读取json文件
1、先准备一个json文件
2、使用vscode创建一个html文件
3、开始撰写js方法
使用原生javascript来处理
先处理读取json文件
之后运行这个html
4、上一步得到的json就是我们index.json文件中的内容
在开发者工具中就能看到显示的数据
5、为了便于查看我们json文件的内容显示在html网页中
6、运行之后的效果，见下图
7、完成的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js如何读取json文件</title>
<script>
window.onload = function () {
var url = "index.json"
var request = new XMLHttpRequest();
request.open("get", url);
request.send(null);
request.onload = function () {
if (request.status == 200) {
var json = JSON.parse(request.responseText);
//console.log(json);
var ol = document.getElementById('ol');
json.person.map(person => {
var li = document.createElement("li");
li.innerHTML = `名字是 ${person.name} 图片是 ${person.image}`;
ol.append(li);
})
}
}
}
</script>
</head>
<body>
<ol id="ol">
</div>
</body>
</html>
8、json文件内容
{
"person":[
{ "name": "云天河" , "image" : "tianhe.png" },
{ "name": "韩菱纱" , "image" : "lingsha.png" },
{ "name": "柳梦璃" , "image" : "mengli.png" },
{ "name": "慕容紫英" , "image" : "ziying.png" },
{ "name": "云天青" , "image" : "tianqing.png" },
{ "name": "夙玉" , "image" : "suyu.png" },
{ "name": "玄霄" , "image" : "xuanxiao.png" },
{ "name": "夙瑶" , "image" : "suyao.png" },
{ "name": "太清" , "image" : "taiqing.png" },
{ "name": "宗炼" , "image" : "zonglian.png" },
{ "name": "婵幽" , "image" : "chanyou.png" },
{ "name": "奚仲" , "image" : "xizhong.png" },
{ "name": "归邪" , "image" : "guixie.png" }
]
}
1、使用js原生 XMLHttpRequest的方法来读取json
2.将读取后的json内容打印到页面中