Json对象和Json字符串之间相互转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了Json对象和Json字符串之间相互转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>