«

原生js导入json

XunQiu 发布于 阅读：19 代码教程（html语言、python语言等）

原生js导入json

🎉 前言

我们话不多说，直接看源码

⚙️ 源码

一个命名为data.json的json文件

[  
    {
        "name": "小夜",
        "age": "114514"
    },
    {
        "name": "荣荣",
        "age": "54188"
    }
]

然后就是必不可少的js

fetch('data.json')
    .then(response => response.json())
    .then(data => {
        console.log(data[0].name);
        console.log(data[0].age);
        console.log(data[1].name);
        console.log(data[1].age);
    });
.catch(error => console.error('发生错误', error));

⚙️ 解析

第一行

第一行的作用是发起对data.json的网络请求

第二行

如果请求到，则第二行会响应并解析json文件，并设置变量data

第三行

解析后，第三行内的{}可以加入任意js代码,例如下发链接的函数

跳转链接

最后一行

最后一行是给你报错的，可要可不要

✨ 美化

如果你不喜欢data变量，你可以在开头声明一个变量，在第三行内的{}里填入value = data;，例：

let value;

fetch('data.json')
    .then(response => response.json())
    .then(data => {
        value = data;
        console.log(value[0].name);
        console.log(value[0].age);
        console.log(value[1].name);
        console.log(value[1].age);
    });
.catch(error => console.error('发生错误', error));

👀 最后

该js不需要在head里导入第三方包

本教程由XunQiu独立制作

js json

收藏