JSON学习笔记(三、使用)

简介: JSON学习笔记(三、使用)

常用场景

JSON经常应用到的场景是:在后台应用程序中将响应数据封装成JSON格式,传到前台页面之后,需要将JSON格式转换为JavaScript对象,然后在网页中使用该数据。

字符串转化为json对象

这是一个json格式的字符串,当然实际应用场景中后台传来的json是作为文件或作为 HttpRequest

var txt = '{ "sites" : [' +
'{ "name":"baidu" , "url":"www.baidu.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

在网页中使用json对象:

var txt = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
var obj = eval ("(" + txt + ")");
document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

JSON转化为字符串

json是js对象,直接打印的话里面是看不到东西的,所以要把它转化成字符串,直接用JSON.stringify 函数就行了。

var urlJson = {"name":"百度","url":"www.baidu.com"};
var urlString = JSON.stringify(hero)
document.write("这是一个json 字符串:"+ urlString );

遍历在很多场景都用得到。

JSON对象遍历

可以使用 for-in 来循环对象的属性:

var site={"name":"百度","url":"www.baidu.com"};
for (x in site) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

JSON数组遍历

for-in
var json = [
    {"name":"第1条"},
    {"name":"第2条"},
    {"name":"第3条"}
]
for( i in json){
    alert(json[i].name);
}
for 循环
var json = [
    {"name":"第1条"},
    {"name":"第2条"},
    {"name":"第3条"}
]
for( i=0;i<json.length;i++){
    alert(json[i].name);
}

目录
相关文章
|
6月前
|
XML JSON 数据可视化
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
本文详细介绍了不同数据集格式之间的转换方法,包括YOLO、VOC、COCO、JSON、TXT和PNG等格式,以及如何可视化验证数据集。
1147 1
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
61 0
|
11月前
|
JSON 前端开发 Java
Spring mvc-文件上传与JSON-学习笔记
Spring mvc-文件上传与JSON-学习笔记
94 2
|
JSON 前端开发 数据格式
前端学习笔记202307学习笔记第六十天-json server的介绍和服务搭建1
前端学习笔记202307学习笔记第六十天-json server的介绍和服务搭建1
119 0
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据1
前端学习笔记202306学习笔记第三十七天-js-认识json数据1
100 0
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据3
前端学习笔记202306学习笔记第三十七天-js-认识json数据3
109 0
|
JSON 数据格式 Python
python读取exlce并转为json的学习笔记
python读取exlce并转为json的学习笔记
102 0
|
JSON 数据格式
java202303java学习笔记第四十六天-请求-日期参数&json参数1
java202303java学习笔记第四十六天-请求-日期参数&json参数1
257 0
|
JSON 数据格式
java202303java学习笔记第四十六天-请求-日期参数&json参数2
java202303java学习笔记第四十六天-请求-日期参数&json参数2
76 0
|
JSON 数据格式
java202304java学习笔记第六十二天-ssm-页面跳转-回显数据json格式字符串
java202304java学习笔记第六十二天-ssm-页面跳转-回显数据json格式字符串
93 0

热门文章

最新文章