首页 前端知识 JavaScript读取json文件

JavaScript读取json文件

2024-06-02 09:06:07 前端知识 前端哥 405 533 我要收藏

文章目录

  • 解析 JSON 数据
  • 将数据转换为JSON字符串
  • 读取JSON文件
    • 利用XMLHttpRequest对象读取Json文件
    • 利用jQuery读取Json文件
    • 引入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'
``
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10561.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!