JSON 数据类型-优快云博客

本文链接：https://blog.youkuaiyun.com/ling_xy/article/details/118619262

本文介绍了JSON作为数据传输格式的基础知识，包括其一、单条和集合型的格式，以及如何进行类型转换。详细讲解了`JSON.parse()`用于将JSON字符串转化为JavaScript对象，而`JSON.stringify()`则用于将JavaScript对象转化为JSON字符串。此外，还提供了模拟数据示例，如百度搜索API，以帮助理解JSON的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、格式
二、类型转换
举例
- 1.JSON.parse() [JSON 字符串—> JavaScript 对象]
- 2.JSON.stringify() [ JavaScript 对象—> JSON 字符串]
三、模拟数据

后台给前端返回的数据格式：数组型+对象

解析json 进行数据绑定

JSON 是用于存储和传输数据的格式，
JSON 通常用于服务端向网页传递数据

一、格式

1.单条json —— key：value

	var list={"name":"张三","age":20};
    console.log(list);
    console.log(list.name);  //张三

在这里插入图片描述
2.集合型json

	var arr=[
        {"name":"b1"},
        {"name":"b2"},
        {"name":"b3"},
        {"name":"b4"}
    ];
    console.log(arr[0].name);	//b1

在以上实例中，对象 “arr” 是一个数组，包含了三个对象。

二、类型转换

后端返回的数据一般为 json对象或 string 类型（json的字符串类型）

var str='[{"name":"b1"},{"name":"b2"},{"name":"b3"},{"name":"b4"}]';
console.log(str);

在这里插入图片描述
json格式转化【JSON字符串型转对象】：

var arr=JSON.parse(str);
console.log(arr);

在这里插入图片描述
【对象型转JSON字符串】：

onsole.log(JSON.stringify(arr));

在这里插入图片描述

举例

1.JSON.parse() [JSON 字符串—> JavaScript 对象]

var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';	
var obj = JSON.parse(text);
console.log(obj);
    
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[2].url;

在这里插入图片描述

2.JSON.stringify() [ JavaScript 对象—> JSON 字符串]

    var str = {"name":"百度", "site":"https://www.baidu.com"}
    var str_pretty1 = JSON.stringify(str);

    var str_pretty2 = JSON.stringify(str, null, 4);
    console.log(str_pretty2);

在这里插入图片描述

JSON.stringify(value[, replacer[, space]])
参数说明：

1.value: 必需，要转换的 JavaScript 值（通常为对象或数组）。

2.replacer: 可选。用于转换结果的函数或数组。

3.space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格

三、模拟数据

var city=[
        {
            name:"陕西省",
            s2:[
                {
                    name:"西安市",
                    s3:[
                        {
                            name:"雁塔区"
                        },
                        {
                            name:"未央区"
                        }
                    ]
                },
                {
                    name:"宝鸡市",
                    s3:[
                        {
                            name:"陈仓区"
                        },
                        {
                            name:"高新区"
                        }    
                    ]
                }
            ]
        }
    ];