Json对象和Json字符串之间相互转换

最新推荐文章于 2024-07-10 03:14:38 发布

刘小mo

最新推荐文章于 2024-07-10 03:14:38 发布

阅读量3.5k

点赞数 1

分类专栏： js 文章标签： javascript json

本文链接：https://blog.csdn.net/qq_45535426/article/details/130364244

版权

js 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文介绍了前端开发中如何处理JSON对象与JSON字符串的相互转换。通过JSON.stringify将JSON对象转换成字符串，然后使用JSON.parse将字符串再还原为JSON对象。示例代码展示了在Vue.js环境中操作这两个方法的过程。

摘要由CSDN通过智能技术生成

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>