如何在JavaScript中循环遍历JSON响应
从远程服务器获取数据时，服务器的响应通常为JSON格式。在本文中，我将演示如何使用JavaScript解析服务器的响应，以便访问所需的数据。该过程通常包括两个步骤：将数据解码为本机结构（例如数组或对象），然后使用JavaScript的内置方法遍历该数据结构。
一、 什么是JSON？
JSON(JavaScript Object Notation, JS 对象标记)是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。（画外音：JSON之父叫做Douglas Crockford，尽管他在社区里不算那么讨喜，不过也无法否认他对JavaScript所作的贡献，著名的开源项目JSlint也是他写的，他还有出版一本书叫How JavaScript Works，中文译名《JavaScript语言精粹》）
数据可以通过两种方式存储在JSON中：
- 名称/值对的集合（又名JSON对象）
- 值的有序列表（又名JSON数组）
从Web服务器接收数据时，数据始终是字符串，这意味着将其转换为可以使用的数据结构是必要工作，如果您想了解有关JSON如何工作的更多信息
二、从远程API获取接口
1. 使用XMLHttpRequest API
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {if (xhr.readyState === XMLHttpRequest.DONE) {console.log(typeof xhr.responseText);console.log(xhr.responseText);}
};
xhr.open('GET', 'https://www.easy-mock.com', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);
返回的数据为：
// string
// {"id":"helloworld","joke":"today is Friday!","status":200}
服务器返回了一个字符串。我们需要先将其解析为JavaScript对象，然后才能遍历其属性。我们可以使用JSON.parse()做到这一点,如下显示：
if (xhr.readyState === XMLHttpRequest.DONE) {const res = JSON.parse(xhr.responseText);console.log(res);
};
//Object { id: "helloworld", joke: "today is Friday!", status: 200 }
2. 使用Fetch API
尽管上面使用XMLHttpRequest对象的方法效果很好，但在复杂的场景下它就会变得非常笨拙。下面我们使用浏览器新提供的api,它是window对象上定义的方法fetch，你可以使用该方法执行请求。此方法返回一个Promise，可用于检索请求的响应。
(async () => {const res = await fetch('https://icanhazdadjoke.com/', {headers: { Accept: 'application/json' },});const json = await res.json();Object.entries(json).forEach(([key, value]) => {console.log(`${key}: ${value}`);});
})();// id : helloworld
// joke : today is Friday
// status : 200
Fetch API返回响应流。这不是JSON，因此JSON.parse()需要尝试使用它的response.json()函数而不是对其进行调用。这将返回一个Promise，该Promise会将响应的正文文本解析为JSON的结果进行解析。
三、 多种方式遍历数据
1. 使用for…in
const res = JSON.parse(xhr.responseText);for (const key in res){if(obj.hasOwnProperty(key)){console.log(`${key} : ${res[key]}`)}
}// id : helloworld
// joke : today is Friday
// status : 200
2. 使用Object.entries，Object.values或Object.entries
const res = JSON.parse(xhr.responseText);Object.entries(res).forEach((entry) => {const [key, value] = entry;console.log(`${key}: ${value}`);
});// id : helloworld
// joke : today is Friday
// status : 200
3. 处理数组
值的有序列表（也称为数组）也是有效的JSON，让我们研究如何处理此类响应。
对于这个示例，我们将使用GitHub的REST API来获取用户存储库的列表：
(async () => {async function getRepos(username) {const url = `https://api.github.com/users/${username}/repos`;const response = await fetch(url);const repositories = await response.json();return repositories;}const repos = await getRepos('sylove');console.log(repos);
})();// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
如您所见，API返回了一个对象数组。要访问每个单独的对象，我们可以使用常规forEach方法：
repos.forEach((repo) => {console.log(`${repo.name} has ${repo.stargazers_count} stars`);
});// CQ has 0 stars
// VM99:14 Food has 1 stars
// VM99:14 vue-blog-generater has 0 stars
// VM99:14 YouDe has 0 stars
// ...
另外，您当然可以使用上面讨论的任何方法来遍历对象的所有属性，并将它们记录到控制台：
repos.forEach((repo) => {Object.entries(repo).forEach(([key, value]) => {console.log(`${key}: ${value}`);});
});// id: 187614270
// VM104:15 node_id: MDEwOlJlcG9zaXRvcnkxODc2MTQyNzA=
// VM104:15 name: CQ
// ...
结论
在这篇文章中，我们研究了什么是JSON。我已经演示了如何将服务器的JSON响应解析为本机数据结构（例如数组或对象），以及如何遍历这种结构以访问其中包含的数据。我们大部分web服务与服务器的交互都是围绕这个这个展开，希望这篇文章对您有所帮助。
如何在JavaScript中循环遍历JSON响应相关推荐
- 如何在JavaScript中循环遍历JSON响应？
从远程服务器获取数据时,服务器的响应通常为JSON格式.在本文中,我将演示如何使用JavaScript解析服务器的响应,以便访问所需的数据.该过程通常包括两个步骤:将数据解码为本机结构(例如数组或对象 ...
- JavaScript中循环遍历JSON响应！
我们在前端开发过程中,通过服务器获取数据的时候服务器返回的数据通常为JSON格式,今天小千就来教大家如何利用JavaScript解析服务器的响应获取我们想要的数据. 该过程通常包括两个步骤:将数据解码 ...
- JavaScript中循环遍历JSON响应
我们在前端开发过程中,通过服务器获取数据的时候服务器返回的数据通常为JSON格式,今天小千就来教大家如何利用JavaScript解析服务器的响应获取我们想要的数据. 该过程通常包括两个步骤:将数据解码 ...
- JS中循环遍历JSON格式数据
//res为json格式数据 if (res != null) { //循环遍历resfor (var key in res) { //遍历中key为字段名的字符串,如{"a":& ...
- 在js中循环遍历json对象
一.遍历普通的jsonArray <script>var data=[{"name":"a","age":12},{" ...
- Ajax获取gzip,如何在javascript中解压缩gzip xhr响应
我有一个来自Web请求的gzipped响应,我需要在JavaScript中解压缩(实际上,在AJAX调用的成功函数中 - 我的代码在无头浏览器中运行,并且没有内置的gzip完整浏览器提供的处理支持). ...
- js 数组遍历符合条件跳出循环体_在JavaScript中循环遍历数组
你有几个选择: 1.顺序for循环: var myStringArray = ["Hello","World"]; var arrayLength = mySt ...
- 如何在JavaScript中比较数组？
本文翻译自:How to compare arrays in JavaScript? I'd like to compare two arrays... ideally, efficiently. 我 ...
- !! javascript_产量！ 产量！ 生成器如何在JavaScript中工作。
!! javascript by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 产量! 产量! 生成器如何在JavaScript中工作. (Yield! Yiel ...
最新文章
- java任何封闭实例都不是java_《java并发编程实战》读书笔记3--对象的组合
- 新秀nginx源代码分析数据结构篇（四）红黑树ngx_rbtree_t
- 1056 Mice and Rice (25 分)【难度: 一般 / 知识点: 模拟】
- PHP第五周答案,算法设计与分析第五周作业——Word Ladder
- python免杀技术---复现+改进----1
- 121 Best Time to Buy and Sell Stock
- poj 3278 catch that cow BFS(基础水)
- 数据结构中基本查找算法总结
- 计算机组成原理r型指令logisim实现_大学本科计算机科学与技术专业知识体系
- 网站获取ip代码怎么写_大学生写论文必备技能：怎么免费获取外文文献并下载...
- javascript 函数的变量与作用域
- Proxy server got bad address from remote server
- 3S基础知识：MapInfo教程--二次开发入门
- android 信鸽推送点击消息跳转问题,信鸽推送 Android 跳转Activity
- 鸿蒙桌面设置教程,鸿蒙系统桌面怎么设置好看？好看的鸿蒙系统手机桌面设置布局推荐...
- var foo = function(){} 和 function foo(){}
- ajax之gson简单用法
- 代码函数从零开始学习OpenCL开发（二）一个最简单的示例与简单性能分析
- 微信小程序之数据处理
- java castor_Castor功能与应用参考四