JavaScript读取json文件

文章目录

• 解析 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'``