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. 腾讯云服务器ubuntu18.04部署禅道系统

    踩了不少坑,记录一下. 基于ubuntu18.04 一开始按照网上的攻略下载安装包 ZenTaoPMS.9.8.3.zbox_64.tar.gz,通过FileZilla传到linux的/opt下面,解 ...

  2. 浅谈C++ STL string容器

    浅谈C++ STL string容器 本篇随笔简单讲解一下\(C++STL\)中\(string\)容器的使用方法及技巧. string容器的概念 其实\(string\)并不是\(STL\)的一种容 ...

  3. 用dotnet core搭建web服务器(二)路由表与封装

    https://gitee.com/lightsever/netcore_study/tree/master/server02_path 先上代码,首先我们把httpserver封装一下,以后用起来方 ...

  4. linux-在指定路径下查询文件夹是否存在

    我们常常在Linux下去查找文件 find / -name 'test.py' # 在根目录下查找名为test.py的文件 但是如果用查找文件的方式去查找文件夹的话,是查不到的 find / -max ...

  5. Java描述设计模式(06):建造者模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 基于建造者模式,描述软件开发的流程. 1.代码实现 /** * 基于建造者模式描述软件开发 */ public class C0 ...

  6. .NETCore C# 中级篇2-6 Json与XML

    .NETCoreCSharp 中级篇2-6 本节内容为Json和XML操作 简介 Json和XML文本是计算机网络通信中常见的文本格式,其中Json其实就是JavaScript中的数组与对象,体现了一 ...

  7. Java中15种锁的分类综合总结

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  8. OpenCV:图像的按位运算

    首先导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(imag ...

  9. Android 列表对话框 使用数组

    添加一个数组 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceSt ...

  10. PyCharm如何导入python项目,并配置虚拟环境

    Pycharm导入python项目 进入PyCharm后,点击File→Open,然后在弹窗中选择需要导入项目的文件夹: 打开了python项目后,需要配置该项目对应的python才可以正常运行: 配 ...