遍历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 ...
随机推荐
- android 启动流程 相关 杂项记录
Android原生流程 Init进程 主要流程及分支梳理 ueventd_main()watchdogd_main()主要流程a) 公共部分 增加PATH 环境变量初始化内核日志,打开/dev/kms ...
- R-5 相关分析-卡方分析
本节内容: 1:相关分析 2:卡方分析 一.相关分析 相关系数: 皮尔逊相关系数:一般用来计算两个连续型变量的相关系数. 肯德尔相关系数:一个连续一个分类(最好是定序变量) 斯皮尔曼相关系数:2个变量 ...
- MyBatis PropertyTokenizer
PropertyTokenizer package org.apache.ibatis.reflection.property; import java.util.Iterator; /* 例1: 参 ...
- nginx如何实现负载均衡以及实现方式
什么是ngnix? Nginx是一个http服务器.是一个使用c语言开发的高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.nginx能够支撑5万并发链接,并且cpu ...
- swoole为什么不能代替nginx
Swoole不能代替Apache和Nginx这些通用的HTTP服务器. 但基于Swoole开发的PHP应用不依赖Apache和Nginx也能提供生产级别的HTTP服务. 有需要学习交流的友人请加入交流 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构
使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...
- Exe4j 打包: this executable was created with an evaluation version of exe4j
异常 this executable was created with an evaluation version of exe4j 异常.png 问题原因 当前打包使用exe4j未授权 解决方法 ...
- intelj idea中除了Find Usage外的另一种查找级联调用的方法
一.方法 平时都是使用find usage来找一个方法的引用的地方,但是只能查看一级,今天偶然发现个查看多级的办法: 在源码编辑界面:
- layui省市区三级联动城市选择
基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...
- JS 逻辑
JS 逻辑 Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false). Boolean 对象 您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器. Boolean ...