js 数组、对象转json 以及json转数组、对象

心已赠人 2021-07-04 21:01 538阅读 0赞

## 1、JS对象转JSON ##

方式：`JSON.stringify(obj)`

var json = { "name":"iphone","price":666}; //创建对象；
    var jsonStr = JSON.stringify(json);       //转为JSON字符串
    console.log(jsonStr);

## 2、JS数组转JSON ##

//数组转json串
    var arr = [1,2,3, {  a : 1 } ];
    JSON.stringify( arr );

## 3、JS对象数组转JSON ##

//数组转json串
    var arr = [1,2,3, {  a : 1 } ];
    JSON.stringify( arr );

## 4、JSON转JS数组 ##

//json字符串转数组
    var jsonStr = '[1,2,3,{"a":1}]';
    var jsarr=JSON.parse( jsonStr );
    alert(jsarr[0]);

## 5、JSON转JS对象 ##

var jsonString = '{"bar":"property","baz":3}';
    var jsObject = JSON.parse(jsonString);    //转换为json对象
    alert(jsObject.bar);    //取json中的值

--------------------

## JS中的数组转变成JSON格式字符串的方法 ##

有一个JS数组，如：

var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]];

想将此数组转换成JSON字符串，如：

var jsonarr = [{ "projectname":projectname1,"projectnumber":projectnumber1},{ "projectname":projectname2,"projectnumber":projectnumber2},{ "projectname":projectname3,"projectnumber":projectnumber3}];

方法如下：

--------------------

## Js 数组转JSON格式 ##

var arrays=new Array();
    	//JSON.stringify() 不能转下标非1,2,3这种数字的数组,
    	//所以采用新建对象的方式添加数据
    	var products={ };
    	products['productid']='32';
    	products['name']='手机';
    	arrays.push(products);
    
    	products['productid']='33';
    	products['name']='电脑';
    	arrays.push(products);
    	
    var json_arrays = JSON.stringify(arrays);
    console.log(json_arrays);

![在这里插入图片描述][20191219092806526.png]

--------------------

## jquery里把数组转换成json的相关方法。 ##

首先来看，jquery里自带的，和json相关的函数：

**1.`$.parseJSON` : 用来解析JSON字符串，返回一个对象。**

什么叫“JSON字符串”?

比如：

var a={ name:"aijquery",url:"www.aijquery.cn"};

上面定义的变量`a`是个`JSON`对象，我们可以直接用“`a.name`”或“`a.url`”来访问内容的数据。

var a="{name:'aijquery',url:'www.aijquery.cn'}";

上面定义的变量a就是一个符合JSON数据结构的字符串，可以叫做“JSON字符串”.

PS:关于`$.parseJSON`的用法，可以参考站长以前写的这篇文章：

`jquery`里把字符串转为`json`对象的四种方法，及每种方法的优缺点

**2. `serializeArray()` : 序列化表格元素 ,返回JSON数据结构数据。**

虽然函数里有个"`Array`"，但和本篇我们要说的“数组转JSON”无关，`serializeArray()`这个函数是用来获取表单数据的，和`serialize()`不同，`serializeArray()`返回的是`JSON`格式的数据。

因为jquery就是在JS的基础上而来的，所以一些JS里的函数，我们在jquery里也是能直接用的，下面来看看JS里和JSON相关的两个函数：

*  `JSON.parse(text)` ： 用于将一个 JSON 字符串转换为JSON对象。
 *  `JSON.stringify()`： 用于将一个"值"转换为 JSON 字符串。

本章我们要说的，把数组转换成JSON，主要用到的就是 " `JSON.stringify()` "，和以前一样，我们直接通过实例来学习：

**实例1：简单的数组：**

var data =["a","b","c"];
    var d =JSON.stringify(data);
    console.log(d);             //["a","b","c"]
    console.log($.type(d));     // string

下面是上面这段代码的运行结果：  
![在这里插入图片描述][20191219093703121.png]  
从上面的代码里，我们可以看出，`JSON.stringify()` 确实是把数组转换成了字符串，但是这个字符串并不是“JSON字符串”，原因就是，在`JSON`里，数据都是“名字:值”这样配对的形式的，但上面这个数组太过简单，只是个一维数组，所以不能转换成“JSON字符串”的。

**实例2：二维数组：**

01:第一种形式的二维数组：

var data =[["a","aa"],["b","bb"],["c","cc"]];
    var d =JSON.stringify(data);
    console.log(d);            //[["a","aa"],["b","bb"],["c","cc"]]
    console.log($.type(d));    //string

运行结果如下：  
![在这里插入图片描述][2019121909390969.png]  
很明显，这个结果也不是我们想要的，因为转换后的字符串，并不是“JSON字符串”。

02：第二种形式的二维数组：

var data =new Array();
    data[0]=new Array();
    data[0][0]="a";
    data[0][1]="aa";
    data[1]=new Array();
    data[1][0]="b";
    data[1][1]="bb";
    var d =JSON.stringify(data);
    console.log(d);            //[["a","aa"],["b","bb"]]
    console.log($.type(d));    //string

运行结果截图如下：  
![在这里插入图片描述][20191219094000929.png]  
很明显，这也不是我们想要的结果。。。。。

03：再换一种写法：

var data =new Array();
    data[0]=new Array();
    data[0]["name"]="a";
    data[0]["val"]="aa";
    data[1]=new Array();
    data[1]["name"]="b";
    data[1]["val"]="bb";
    var d =JSON.stringify(data);
    console.log(d);                //[[],[]]
    console.log($.type(d));        //string

看这次的运行结果：  
![在这里插入图片描述][20191219094129861.png]  
与我们想要的结果更远了，不过不要急，还有最后一种：

04：最后一种写法，直接把数据定义成对象：

下面是截图：  
![在这里插入图片描述][20191219094158608.png]  
这下就是我们想要的结果了，从上面的截图就可以看出，最后转换成的结果完全就是“JSON字符串”。

[20191219092806526.png]: /images/20210704/ea02a73b43f04df095fc06cc19c4a36a.png
[20191219093703121.png]: /images/20210704/6154c5900b3b43eea56321dc7982fb19.png
[2019121909390969.png]: /images/20210704/1db8cd20b01a4df89240c2de1ccb8c81.png
[20191219094000929.png]: /images/20210704/fa21156e3d7840818c68828612d71293.png
[20191219094129861.png]: /images/20210704/a015dfcdecdb472f94e73172c264b5a1.png
[20191219094158608.png]: /images/20210704/7b777b0d18284da1a08c5c9ce009fb66.png