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. 线性模型之逻辑回归(LR)(原理、公式推导、模型对比、常见面试点)

    参考资料(要是对于本文的理解不够透彻,必须将以下博客认知阅读,方可全面了解LR): (1).https://zhuanlan.zhihu.com/p/74874291 (2).逻辑回归与交叉熵 (3) ...

  2. 关于Struts.xml的路径配置以及对应的连接路径问题

    主要记住一点!: 1.   namespace的路径配置例如:/x:   2.  name名自由配置(主要用来是做action跳转方法用的) 3.  form表单中提交action时以这个格式提交(此 ...

  3. Genymotion模拟器安装搜狗输入法

    Genymotion模拟器默认没有中文输入法,如果在一些调试中涉及到需要输入中文则必须需要安装中文输入法. 这里以搜狗输入法为例. 这里需要注意一下几点就行: 百度下载一个搜狗输入法,需要特别注意的是 ...

  4. linux系统LAMP环境部署

    一.安装虚拟机 二.安装CentOS7 注意:以下安装,用的root权限. 三.安装Apache 1.安装 yum -y install httpd 2.开启apache服务 systemctl st ...

  5. [Verilog] 从系统时钟转换出想要的时钟

    如何50MHZ时钟转换出一个250KHZ的时钟出来? 假如系统时钟是50MHZ,然后想得到250KHZ的新时钟,那么50MHZ / 250KHZ = 200倍,然后令k=200,程序如下: ; :] ...

  6. Salesforce学习之路(十)Org的命名空间

    1. 命名空间的适用场景 每个组件都是命名空间的一部分,如果Org中设置了命名空间前缀,那么需使用该命名空间访问组件.否则,使用默认命名空间访问组件,系统默认的命名空间为“c”. 如果Org没有创建命 ...

  7. Ubuntu清空回收站

    ubuntu 回收站的具体位置:$HOME/.local/share/Trash/ 执行如下命令清空回收站: sudo rm -fr $HOME/.local/share/Trash/files/ 如 ...

  8. pat 1023 Have Fun with Numbers(20 分)

    1023 Have Fun with Numbers(20 分) Notice that the number 123456789 is a 9-digit number consisting exa ...

  9. gcc在x64体系中如何传递参数,linux,mac,iOS适用

    上一篇介绍了vc(windows)平台在x64体系当中,c函数的传参方式.本篇将要介绍gcc(类linux,mac)平台在x64中,c函数是如何传参的.为节约时间和篇幅,首先来定义一个有十个参数的函数 ...

  10. selenium中延时等待三种方式

    selenium中的延时等待方式有三种:强制等待:sleep()  隐示等待:implicitly_wait()  显示等待 WebDriverWait() 1.强制等待:sleep(),time模块 ...