JavaScript 学习-JSON数据处理使用

阿飞756
379 阅读3分钟

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

前言:

回顾上一篇对 JS 中的重要数据结构 JSON 进行了了解, 经常遇到, 但是有些时候对这些数据传递或获取后进行处理,也是一个比较复杂的知识点, 也因为要经常打交道, 那么接下来就对 JSON 的一些处理技巧进行探究.

在前面系列更文中, 我们对 JavaScript 的一些知识点进行了学习, 也有通过 JS 实现经典算法作具体学习, 小总结更多阅读-list & 经典排序算法-list

JavaScript 重要数据类型 JSON

MDN | (JSON) 是用于将结构化数据表示为 JavaScript 对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上

请求 JSON 数据并在页面显示

JSON 的使用: 请求一个在线的 JSON 格式(.json)的数据, 并在页面中显示相关数据的步骤:

1. 定义要请求的 JSON 文件的路径 URL

.json 文件的 URL 地址:

let requestJSONURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'

2. 创建一个 HTTP 请求

通过 new 构造函数的形式来 创建一个 HTTP 请求对象：

// new 一个 HTTP 请求对象
let request = new XMLHttpRequest()

3. 通过 open()发起一个请求

使用 open() 函数打开一个新的请求:

request.open('GET', requestURL)

4. 设定请求数据返回的格式

通过设定 responseType 为 JSON, 让服务器将知道我们想要返回一个 JSON 对象, 然后发送请求:

request.responseType = 'json'
request.send()

5. 处理 JSON 数据

请求到来自服务器的返回数据后, 处理数据:

request.onload = function () {
  let superHeroes = request.response
  populateHeader(superHeroes)
  showHeroes(superHeroes)
}

保存请求的数据(访问 response 属性) 于变量 superHeroes, 这个变量现在含有 JSON！

JSON 数据处理方法:

  1. JSON.parse(dataText)

    .parse()以文本字符串形式接受 JSON 对象作为参数，并返回相应的对象。

request.onload = function () {
  var superHeroesText = request.response // get the string from the response
  var superHeroes = JSON.parse(superHeroesText) // convert it to an object
  populateHeader(superHeroes)
  showHeroes(superHeroes)
}

  1. JSON.stringify(myJSON)

    .stringify()方法接收一个对象作为参数，返回一个对应的 JSON 字符串。

let myJSON = { name: '阿白呀', age: '18' }

// 通过 stringify() 将它转换成JSON字符串
let myString = JSON.stringify(myJSON)
// myString: '{"name":"阿白呀","age":"18"}'

更多阅读:

经典排序算法:

JavaScript 学习提升

avatar
文章
阅读
粉丝