JSON在HTML页面的常见用法

由于最近写项目频繁地用到JSON,并且需要做各种结构变化以符合不同的需求,因此记录一下最近用到的一些相关的小技巧。

1.JSON对象与JSON字符串互相转化

首先定义一个json对象

			var json={
				m1: '21℃',
				m2: '22℃',
				m3: '23℃',
				m4: '20℃',
				m5: '20℃',
				m6: '20℃',
				m7: '20℃',
				m8: '20℃',
				m9: '20℃',
				m10: '20℃',
				m11: '20℃',
				m12: '20℃',
				y: 'y'
			}

再定义函数

			function stringifyJsonObj(){
				console.log(typeof json);//输出json变量的类型
				console.log(json)
				if(typeof json =='object'){
					var test=JSON.stringify(json)
				}
				console.log(test);
                console.log(JSON.parse(test));
			}

console.log(typeof json)输出json这个变量的类型,typeof json == 'object',可以判断该变量是否是object类型

object

console.log(json)输出整个json对象,在chrome里输出如下,点击左边的小三角可以展开方便查看。

m1: "21℃"
m2: "22℃"
m3: "23℃"
m4: "20℃"
m5: "20℃"
m6: "20℃"
m7: "20℃"
m8: "20℃"
m9: "20℃"
m10: "20℃"
m11: "20℃"
m12: "20℃"
y: "y"
__proto__: Object

JSON.stringify(json)可以将json对象转换为字符串类型,转化后输出如下

{"m1":"21℃","m2":"22℃","m3":"23℃","m4":"20℃","m5":"20℃","m6":"20℃","m7":"20℃","m8":"20℃","m9":"20℃","m10":"20℃","m11":"20℃","m12":"20℃","y":"y"}

使用JSON.parse(test)可以将已经是string类型的json格式字符串转换成json对象,输出如下

JSON在HTML页面的常见用法_第1张图片

2.遍历JSON对象中的key-value

定义函数

function traverseSonObj()
{
	for(key in json)
	{
		console.log(key+":"+json[key]);
	}
}

使用for(key in json)可以用key遍历json对象的键,使用json[key]可以得到对应键值的值。

点击按钮触发函数,输出如下:

JSON在HTML页面的常见用法_第2张图片

利用这个小技巧也可以将json子对象中的每个键对应的值取出来组成数组,然后可以用在比如echart上面。

定义函数如下

			function putJsonSonToArr(){
				var arr=[];
				for(key in json)
				{
					arr.push(json[key]);
				}
				console.log(arr);
			}

使用arr.push可以将值放入数组中,创建按钮绑定事件并点击触发输出如下:

JSON在HTML页面的常见用法_第3张图片

可以看到已将json对象中所有的值取出并拼成了一个数组。

3.JSON结构拼接

对于有时候,需要通过Element-ui下拉框来分类加载数据。一般,我们从属性表中查询出所有的类别,如类别1、类别2、类别3

然后切换的时候控件添加@change事件自动请求对应类别的数据。没有问题,但是这里有一个界面一开始就是战士的所有数据,如果用户切换了就自动改变,但是如果用户不刷新界面那么就无法看到全部数据了。刚好最近的原型设计里有这个,需要在原有的三种分类上加上全部,这样可以自由切换了。OK,面对这样的需求,如果在属性表里添加一个全部类别感觉不合适,这时可以在前台取到属性表的分类数据的时候加上一条“全部”。

实现的思路就是手动定义一个json,放在类别List的最前面。

 

JSON在HTML页面的常见用法_第4张图片

var arr = {
    value:"null",
    text:"全部"
}

res.unshift(arr); //在List前面置元素

还有一个res.push用于在List后面置入元素,但是显然这里使用unshift更为合适。

JSON在HTML页面的常见用法_第5张图片

 

4.遍历和编辑数组和json

对于数组,var key in List,key是index(1,2,3)。对于json对象 var key in jsonObj,key是键对应的字符(name,age),调用方法都是obj[key].向json对象中添加子对象只需要jsonObj,新对象名 =  值,即可产生一个新的子元素。而list里必须的用push新增的方式添加元素。

//向json对象(map)中添加子对象
jsonObj."newObj" = xx ;
//遍历数组用list.length
for(var i = 0;i

5.动态赋值json子对象

这种操作经常用于界面加载时的默认值赋值,后台传递过来的参数一个个地用 = 号去赋值很麻烦。

前提是前台所需要地数据是这种格式的,直接用父对象赋值子对象也会被赋上值。这里直接用遍历的key的命名去匹配name1、name2如果匹配到了就对应赋值,这种方式可以减少编写大量的冗余赋值代码。

//就需要直接用name1这层进行赋值
app:{
    name1:{
        obj1:'',
        obj2:'',
    },
    name2:{
        obj1:'',
        obj2:'',
    },
}

实现方式:

//将从接口取到的deviceParameters中的对象赋值给app中有重合的对象
                        for(var key in that.deviceParameters){
                            for(var appKey in app)
                            {
                                if(key == appKey){
                                    app[appKey] = that.deviceParameters[key];
                                }
                            }
                        }

 

你可能感兴趣的:(网页前端)