JavaScript中循环遍历JSON响应
我们在前端开发过程中,通过服务器获取数据的时候服务器返回的数据通常为JSON格式,今天小千就来教大家如何利用JavaScript解析服务器的响应获取我们想要的数据。
该过程通常包括两个步骤:将数据解码为本机结构(例如数组或对象),然后使用JavaScript的内置方法遍历该数据结构。
从远程API获取接口
1. 使用XMLHttpRequest API
返回的数据为:
// string// {"id":"helloworld","joke":"today is Friday!","status":200}
服务器返回了一个字符串。我们需要先将其解析为JavaScript对象,然后才能遍历其属性。我们可以使用JSON.parse()做到这一点,如下显示:
使用Fetch API
尽管上面使用XMLHttpRequest对象的方法效果很好,但在复杂的场景下它就会变得非常笨拙。下面我们使用浏览器新提供的api,它是window对象上定义的方法fetch,你可以使用该方法执行请求。此方法返回一个Promise,可用于检索请求的响应。
Fetch API返回响应流。这不是JSON,因此JSON.parse()需要尝试使用它的response.json()函数而不是对其进行调用。这将返回一个Promise,该Promise会将响应的正文文本解析为JSON的结果进行解析。
多种方式遍历数据
1. 使用for...in
2. 使用Object.entries,Object.values或Object.entries
3. 处理数组值的有序列表(也称为数组)也是有效的JSON,让我们研究如何处理此类响应。对于这个示例,我们将使用GitHub的REST API来获取用户存储库的列表:
如您所见,API返回了一个对象数组。要访问每个单独的对象,我们可以使用常规forEach方法:
另外,您当然可以使用上面讨论的任何方法来遍历对象的所有属性,并将它们记录到控制台:
结论
在这篇文章中,我们研究了什么是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},{" ...
- js 数组遍历符合条件跳出循环体_在JavaScript中循环遍历数组
你有几个选择: 1.顺序for循环: var myStringArray = ["Hello","World"]; var arrayLength = mySt ...
- 中的枚举属性函数_对于 JavaScript 中循环之间的技术差异分析
在 JavaScript 中使用循环时,需要理解两个关键点:可枚举的属性和可迭代的对象. 可枚举的属性 可枚举对象的一个定义特征是,当通过赋值操作符向对象分配属性时,我们将内部 enumerable ...
- ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
- html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据 本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
最新文章
- mysql查看数据库创建语句_mysql-模糊查找数据库和查看数据库的创建语句
- leetcode算法题--二叉树的深度
- 九度OJ 区间问题 10000个随机正负数生成
- 校园送礼风为何难刹住 “送了没个完,不送没个底”
- 考前自学系列·计算机组成原理·中央处理器知识点
- 实用计算机相关日语词汇,计算机相关日语词汇整理2
- Window phone用手机来控制电脑的多媒体播放
- Java Swing Mysql学生信息管理系统
- 从小编程,到架构师,我们应该具备什么
- 分享30个应用HTML5的网站案例
- 《纽约时报》:乔布斯最后的日子 与家人相伴
- php手机下载功能,phpwind手机客户端1.2版主要功能亮点详解
- 适配器模式(Adapter模式)详解
- 微信公众号的html5界面用什么软件,微信公众号编辑排版用什么软件(推荐这4款编辑器)...
- 攻防世界logmein
- sam格式的结构和意义_NGS数据格式02-SAM/BAM最详细解读
- 社保基数:你确定公司给你交全了吗?
- OSChina 娱乐弹弹弹——问世间情为何物,直教人生死相许
- CSR867x — 使用Sink Configuration Tool配置按键
- idea设置主题背景
热门文章
- Spring学习总结(15)——Spring AOP 拦截器的基本实现
- python urllib3 post ssl,python post https报错解决方案
- 精益画布_这6本书让你成为精益高手
- MySQL 在指定位置新增字段
- 【转】拷贝构造函数的参数类型必须是引用
- mysql-5.6.24-win32.zip 下载 安装 配置 创建数据库
- CentOS6.4 配置mysql服务器启动多个端口,同步单表数据
- JavaScript遇到浏览器不兼容与解决方案
- Ubuntu18.04安装JDK1.8.0_11
- rabbitMQ:知识点