这里写自定义目录标题
JSON数据
什么是JSON数据
1、JSON全称:JavaScript Object Notation又叫javascript对象标记,开发目的替代XML技术。
2、JSON只是数据的组织形式,把JS数据类型组织成JSON数据的格式
JSON的格式
jsond的格式是以键值对的形式来组织数据。
注意事项:
1、键名只能用双引号与建值之间只能用冒号隔开。
2、建值支持所有js数据类型但是建值取值不能取undefined。
//定意一个变量
var staff={
“name”:“王者”,
“sex”:“女”,
“hoddy”:看男的健身
“age”:19
}
在页面中显示的区别
用console.log输出JSON数据会被转换为对象输出键名的引号将被删除
使用window.alter和document.write只能显示JSON数据的对象类型
访问JSON数据的成员
访问json成员的方法:
点语法:console.log(staff.name)变量名与键名之间用点来间隔。
下标语法:console.log(staff[“name”])也可以使用中括号来进行间隔但是在这个时候中括号里的键名需要用引号引住。
在访问成员时尽量使用点语法。
下标语法的使用有使用要求,就是键名为变量的时候必须使用下标语法。
JSON数据的遍历访问
var game={
"salutation":"绝地求生",
"category":"求生类",
"size":"45GB",
"number":"10400",
"price":"98"
}
for(var i in game){
console.log(i);
}
//我们利用for-in循环来遍历JSON数据for循环其中的i为键名
在遍历的过程中我们可以使用for-in来实现,不可以用for-of来实现。
在页面中显示JSON数据
在js中引用元素
在页面中寻找到选择器类名的取值
同时在页面中寻找都可以使用document.querySelector来实现
var tp=document.querySelector(".tp");
var taname=document.querySelector(".taname");
var anne=document.querySelector(".anne");
var rrts=document.querySelector(".rrts");
在js中为html添加内容
innerText:成对的标记对中间的文本内容
原理:利用innerText访问json中的数据进行添加
ding.src=staff.pic;
taname.innerText=staff.name;
anne.innerText=staff.address;
rrts.innerText=staff.price;
百度图表
前提条件
在html文档中引入.json文件并且在html文档的head标记对中引入
在HTML之中建立一个有宽高的div来盛放表格
<head>
<script type=“text/javascript” src=“js/echarts.js”></script>
</head>
具体实现
//初始化EChatrs:
var chart=echarts.init(myChart);
// 设置图表选项:
var options={
"title":{
// 设置标题
"text":"一周的花销"
},
// 鼠标经过的提示
"tooltip":{},
// x轴的数据名称
"xAxis":{
"data":["周一","周二","周三","周四","周五","周六","周日"]
},
// y轴的数据名称
"yAxis":{},
"series":[
{
//以柱形图显示
"type":"bar",
"name":"招生人数",
"data":[30,80,50,45,75,60,90]
}
],
//隐藏或显示图表
"legend":{
"data":["每天的支出"]
},
"color":["#85785f"]
}
//根据表格来实现图表
chart.setOption(options);