JavaScript读取json文件

文章目录

• 解析 JSON 数据
• 将数据转换为JSON字符串
• 读取JSON文件
• • 利用XMLHttpRequest对象读取Json文件
  • 利用jQuery读取Json文件
  • 引入json

• 对象：由若干键/值对（即key:value）组成的无序集合，每个对象以左花括号{开始，以右花括号}结尾，多个键/值对之间使用逗号,分隔；
• 数组：一个有序的值列表，每个数组以左方括号[开始，以右方括号]结尾，多个值之间使用逗号,分隔。

在 JSON 中，属性名称或键都是字符串格式的（需要使用英文的双引号括起来），而值则可以是任意类型，如下所示：

{
    "course": {
        "name": "JavaScript",
        "author": "http://c.biancheng.net/",
        "year": 2021,
        "genre": "Getting Started tutorial",
        "bestseller": true
    },
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}复制

解析 JSON 数据

使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象。

var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}';
var obj = JSON.parse(json); // 使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象：
console.log(obj.course);
console.log(obj.fruits);复制

结果如下：

{name: 'JavaScript', author: 'http://c.biancheng.net/', year: 2021, genre: 'Getting Started tutorial', bestseller: true}
 
['Apple', 'Banana', 'Strawberry', 'Mango']复制

将数据转换为JSON字符串

JSON.stringify()方法 来将 json对象转化为json字符串

var obj = {
    "name": "JavaScript",
    "author": "http://c.biancheng.net/",
    "year": 2021,
    "genre": "Getting Started tutorial",
    "bestseller": true
};
var json = JSON.stringify(obj);
document.write(json);复制

结果如下：

{"name":"JavaScript","author":"http://c.biancheng.net/","year":2021,"genre":"Getting Started tutorial","bestseller":true}复制

JavaScript 对象与 JSON 对象的区别：在 JavaScript 中，对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来，也可以完全省略引号。但是，在 JSON 中，所有属性名称都必须用双引号括起来。

读取JSON文件

利用XMLHttpRequest对象读取Json文件

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
console.log(json);
}
};
xmlhttp.open("GET", "example.json", true);
xmlhttp.send();复制

利用jQuery读取Json文件

$.getJSON("example.json", function(json) {
console.log(json);
});复制

引入json

在Vue.js中首选将json文件引入

import data from '../assets/data.json'
``复制