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数据的几种方式的更多相关文章

  1. 遍历json数据的几种方式。

    json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...

  2. 【代码笔记】iOS-向服务器传JSON数据的两种方式

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  3. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  4. spring mvc 返回json数据的四种方式

    一.返回ModelAndView,其中包含map集 /* * 返回ModelAndView类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式 ...

  5. JavaWeb 返回json数据的两种方式

    1.说明 由于一般情况下,由浏览器(前端)发送请求,服务器(后台)响应json数据,所以这里结合js进行说明: A服务器发送请求至B服务器,并接收其返回的json数据,见文末推荐,这里不再赘述! 2. ...

  6. Java解析Json数据的两种方式

    JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量,所以使用越来越广泛,下面介绍使用JsonObject和JsonArray的两种方式解析Json数据. 使用以上两种方式解析json ...

  7. Spring MVC中返回JSON数据的几种方式

    我们都知道Spring MVC 的Controller方法中默认可以返回ModeAndView 和String 类型,返回的这两种类型数据是被DispatcherServlet拿来给到视图解析器进行继 ...

  8. SpringMVC返回json数据的三种方式

    1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id="defaultJsonView" cla ...

  9. SpringMVC返回json数据的三种方式(转)

    原文:https://blog.csdn.net/shan9liang/article/details/42181345# 1.第一种方式是spring2时代的产物,也就是每个json视图contro ...

随机推荐

  1. IM开发基础知识补课(七):主流移动端账号登录方式的原理及设计思路

    1.引言 在即时通讯网经常能看到各种高大上的高并发.分布式.高性能架构设计方面的文章,平时大家参加的众多开发者大会,主题也都是各种高大上的话题——什么5G啦.AI人工智能啦.什么阿里双11分分钟多少万 ...

  2. MongoDB增删改查表文档

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,是一个基于分布式文件存储的开源数据库系统.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...

  3. md2all 简单实用

    . 简单使用 md2all 使用地址:http://md.aclickall.com/ . 常用操作 #代表标题等级 英文下```java(语言)``` 代表代码块

  4. Python 爬虫从入门到进阶之路(二)

    上一篇文章我们对爬虫有了一个初步认识,本篇文章我们开始学习 Python 爬虫实例. 在 Python 中有很多库可以用来抓取网页,其中内置了 urllib 模块,该模块就能实现我们基本的网页爬取. ...

  5. Quartz.NET总结(三)如配置jobs

    前两篇文章,已经介绍了Quartz.NET的使用和Cron表达式表达式的写法,今天说一说Quartz的配置,Quartz相关的配置有三个quartz.config.quartz_jobs.xml.lo ...

  6. [Spring cloud 一步步实现广告系统] 1. 业务架构分析

    什么是广告系统? 主要包含: 广告主投放广告的<广告投放系统> 媒体方(广告展示媒介-)检索广告用的<广告检索系统> 广告计费系统(按次,曝光量等等) 报表系统 Etc. 使用 ...

  7. 怎样使用element-starter快速搭建ElementUI项目

    场景 为了能快速搭建起一个ElementUI项目,我们可以使用element-starter这个模板进行快速搭建. element-starter的Github https://github.com/ ...

  8. SSM框架之Spring(2)IOC及依赖注入

    Spring(2)IOC及依赖注入 基于xml配置文件的实现 1.IOC (控制反转-Inversion Of Control) 控制反转(Inversion of Control,缩写为IoC),是 ...

  9. springcloud 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  10. BASE64Encoder cannot be resolved to a type类似问题的解决办法

    我们有时候会碰见在JDK或者其他jar包中提供了某方法或者类,接口,而开发工具仍然报红,无法使用该类或者方法,那是应为我们的编译器没有识别,或者没有支持某些方法或者类 这个时候需要我们手动的开启.具体 ...