遍历json数据的几种方式
json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法。他能够进行数据的传输,通常和ajax一起使用。它具有体积小、速度快,易解析等诸多优点。
使用json首先要学习如何获取json的数据。json类似Java里的map集合,两者的数据都是由键值对构成的。键可以使用引号,也可以不使用引号。
1.定义json
//基本格式
var category= {"id": "1", 'name': "JavaSe"}; var categorys= [{"id": "1", 'name': "JavaSe"},
{"id": "2", 'name': "JavaEe"},
{"id": "3", 'name': "前端"},
{"id": "4", 'name': "其他"}];
2.获取数据的几种方式
2.1 使用json对象名.键名获取数据
var target = category.name;
2.2 使用json对象名[键名]获取数据
var target = category[name];
2.3 使用json数组对象名[索引]获取数据
var target = categorys[0];
2.4 遍历json数组获取数据
从服务器端获取到的数据
[SysCategory{id=1, name='JavaSe'}, SysCategory{id=2, name='JavaEE'}, SysCategory{id=3, name='前端'}, SysCategory{id=4, name='其他'}]
打印数据如下

开始遍历:
//遍历1
for (var c in categorys) {
var option = document.createElement("option");
option.setAttribute("value", categorys[c].id);
option.innerText = categorys[c].name;
select.appendChild(option)
}
//遍历2
for (var i = 0; i <categorys.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", categorys[i].id);
option.innerText = categorys[i].name;
select.appendChild(option)
}
结果如下
可以看到,服务器端的数据已经成功显示到页面上的下拉菜单上。
遍历json数据的几种方式的更多相关文章
- 遍历json数据的几种方式。
json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...
- 【代码笔记】iOS-向服务器传JSON数据的两种方式
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- spring mvc 返回json数据的四种方式
一.返回ModelAndView,其中包含map集 /* * 返回ModelAndView类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式 ...
- JavaWeb 返回json数据的两种方式
1.说明 由于一般情况下,由浏览器(前端)发送请求,服务器(后台)响应json数据,所以这里结合js进行说明: A服务器发送请求至B服务器,并接收其返回的json数据,见文末推荐,这里不再赘述! 2. ...
- Java解析Json数据的两种方式
JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量,所以使用越来越广泛,下面介绍使用JsonObject和JsonArray的两种方式解析Json数据. 使用以上两种方式解析json ...
- Spring MVC中返回JSON数据的几种方式
我们都知道Spring MVC 的Controller方法中默认可以返回ModeAndView 和String 类型,返回的这两种类型数据是被DispatcherServlet拿来给到视图解析器进行继 ...
- SpringMVC返回json数据的三种方式
1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id="defaultJsonView" cla ...
- SpringMVC返回json数据的三种方式(转)
原文:https://blog.csdn.net/shan9liang/article/details/42181345# 1.第一种方式是spring2时代的产物,也就是每个json视图contro ...
随机推荐
- 如何下载B站哔哩哔哩(bilibili)弹幕网站上的视频呢?小白教你个简单方法
对于90后.00后来说,B站肯定听过吧.小编有一个苦恼的地方,有时候想把哔哩哔哩(bilibili)上看到的视频保存到手机相册,不知道咋操作啊.网上百度了下,都是要下载电脑软件的,有些还得要付费的.前 ...
- [译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
- 1、web爬虫,requests请求
requests请求,就是用python的requests模块模拟浏览器请求,返回html源码 模拟浏览器请求有两种,一种是不需要用户登录或者验证的请求,一种是需要用户登录或者验证的请求 一.不需要用 ...
- vue-cli2和cli3的使用和区别
vue-cli脚手架的使用 使用vue-cli可以快速搭建vue的开发环境,和webpack的配置 安装vue脚手架: npm install -g@vue/cli 上面安装的是vue cli3的版本 ...
- vue定义data的三种方式与区别
在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...
- ASP.NET Core 3.0 gRPC 配置使用HTTP
前言 gRPC是基于http/2,是同时支持https和http协议的,我们在gRPC实际使用中,在内网通讯场景下,更多的是走http协议,达到更高的效率,下面介绍如何在 .NET Core 3.0 ...
- git push 时用户的配置
Pycharm临时配置git提交的账户:git 修改当前的project的用户名的命令为:git config user.name 你的目标用户名**;git 修改当前的project提交邮箱的命令为 ...
- SQLi-LABS Page-3 (order by injections) Less-46-Less-53
关于order by 注入原理讲解 注入原理 1. 测试 ?sort=1 desc--+?sort=1 asc--+ 显示结果不同,说明可以注入 desc是 descend 降序意思 asc 是 as ...
- 剑指offer 24:二叉搜索树的后序遍历序列
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 解题思路 后序遍历,顾名思义根节点位于尾部,故可将 ...
- 高级语言——java
高级语言——java 起源与发展 1991 年,James Gosling 博士发布产品 Oak,这是 Java 语言的前身. 1995 年,Oak 语言改名为 Java. 1996 年,JDK(Ja ...