Json对象和Json字符串之间相互转换
作为前端开发,在和后端进行联调接口时,总会遇到要求传JSON字符串或是JSON对象,或者是返回值里是JSON字符串要在页面上展示JSON对象这种情况,都需要前端开发人员对Json对象和Json对象进行相互转换,得到想要的结果。
废话不多说,直接上干货:
1.首先定义一个Json对象:
JsonObj:{
name:'张三',
age:'23',
sex:'男'
},
2.打印这个对象和这个对象的属性值看看:
<!-- 展示Json对象 -->
<div>Json对象:{{ JsonObj }}</div>
<!-- 从Json对象中获取某些属性值 -->
<div>姓名:<span>{{ JsonObj.name }}</span></div>
<div>年龄:<span>{{ JsonObj.age }}</span></div>
<div>性别:<span>{{ JsonObj.sex }}</span></div>
得到的结果:
Json对象:{ “name”: “张三”, “age”: “23”, “sex”: “男” }
姓名:张三
年龄:23
性别:男
3.将Json对象转换为Json字符串
this.objToStr = JSON.stringify(this.JsonObj)
得到的结果:
对象转字符串:{“name”:“张三”,“age”:“23”,“sex”:“男”}
4将Json字符串转换为Json对象
this.strToObj = JSON.parse(this.objToStr)
得到的结果:
字符串转对象:{ “name”: “张三”, “age”: “23”, “sex”: “男” }
姓名1:张三
年龄1:23
性别1:男
完整的代码演示:
<template>
<div>
<!-- 展示Json对象 -->
<div>Json对象:{{ JsonObj }}</div>
<!-- 从Json对象中获取某些属性值 -->
<div>姓名:<span>{{ JsonObj.name }}</span></div>
<div>年龄:<span>{{ JsonObj.age }}</span></div>
<div>性别:<span>{{ JsonObj.sex }}</span></div>
<!-- 将Json对象转换为Json字符串 -->
<el-button type="primary" style="margin: 20px;" @click="handleObjToStr()" >将Json对象转换为Json字符串</el-button>
<div>对象转字符串:{{ objToStr }}</div>
<!-- 将Json字符串转换为Json对象 -->
<el-button type="primary" style="margin: 20px;" @click="handleStrToObj()">Json字符串转换为Json对象</el-button>
<div>字符串转对象:{{ strToObj }}</div>
<div>姓名1:<span>{{ strToObj.name }}</span></div>
<div>年龄1:<span>{{ strToObj.age }}</span></div>
<div>性别1:<span>{{ strToObj.sex }}</span></div>
</div>
</template>
<script>
export default {
data(){
return {
// 1.首先定义一个Json对象
JsonObj:{
name:'张三',
age:'23',
sex:'男'
},
objToStr:'',
strToObj:{}
}
},
methods:{
handleObjToStr(){
this.objToStr = JSON.stringify(this.JsonObj)
// 姓名打印出来是undefined,因为他是一个对象,里边是没有name这个属性值的所以是undefined
console.log('姓名:', this.objToStr.name)
this.strToObj ='bbbbb'
},
handleStrToObj(){
this.strToObj = JSON.parse(this.objToStr)
this.objToStr = 'aaaaa'
}
}
}
</script>