您的位置：首页 > Web前端 > JavaScript

js中json字符串对象互转的例子

2016-04-06 13:17 417 查看
son字符串与对象互相转换的话我们只需要简单的来设置一下就可以了，今天我们一起来一篇关于js中json字符串对象互转的例子，希望文章能够帮助到大家的哦。

json对象，json字符串，不注意的话，很容易忽视混淆。例举几个容易混的情况

1，php将变量放到input框中，通过js去读取出来的是json字符串，要想使用就要将json字段串转成json对象

2，ajax返回json数据，如果请求没有设置dataType为json，这个时候得到也是json字符串

3，通过js改变input的value值，如果直接json对象，赋值的话，用开发者工具看到的值会是这样的，[Object Object]

一，json字符串，json对象区别

var aa = '{"test":1,"test1":2}';  

var bb = {"test":1,"test1":2};  

  

console.log(bb);   //结果为 Object { test=1,  test1=2}  

console.log(aa);   //结果为 {"test":1,"test1":2} 

区别就是，一个是对象，一个是字符串，哈哈。

二，json字符串转json对象

var obj = eval('(' + aa + ')');     //方法1  

var obj = JSON.parse(aa);         //方法2 

三，json对象转json字符串

var last=JSON.stringify(obj);  

上面的转换，我只加载了，jquery

例子

<!DOCTYPE html>  

<html>  

<head>  

    <title>json-demo</title>  

</head>  

<body>  

    <textarea id="textarea1" value="" style="width: 500px;height: 300px;"></textarea> 

</body>  

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>  

    <script type="text/javascript" src="json2.js"></script>  

    <script type="text/javascript">  

    <!--  

        $(document).ready(function(){  

            test1();  

        });  

        function test1(){  

            //  简单字符串转换为json对象  

            var str = '{ "label": "aa", "value": "bb" }';  

            var obj = JSON.parse(str);  

            show(obj.label);  

            // 较复杂的json字符串书写格式  

            var str2 = '{' +  

                    '"chart":{' +  

                        '"xAxisName":"dd",' +  

                        '"yAxisName":"ee"' +  

                    '},"data":[]' +  

                '}';  

            var obj2 = JSON.parse(str2);  

            // 查找json对象  

            show(obj2.chart.xAxisName);  

            // 修改json对象  

            obj2.chart.xAxisName = "dddd";  

            show(obj2.chart.xAxisName);  

            // 删除json对象  

            delete obj2.chart.xAxisName;  

            show(obj2.chart.xAxisName);  

            var elemSet;  

            // js操作json对象  

            for(var i=0; i<2 ;i++){  

                elemSet = {"label":i*2,"value":i*10,"color":"76A5DB"};  

                // 增加json对象中的data集合元素  

                obj2.data.push(elemSet);  

            }  

            show(obj2.data[0].label+','+obj2.data[0].value+','+'obj2.data[0].color');  

            // 将json对象转换为字符串  

            show(JSON.stringify(obj2));  

        }  

        function show(text){  

            var input = $('#textarea1').val();  

            input += '---' + text + '\n';  

            $('#textarea1').val(input);  

        }  

    -->  

    </script>  

</html> 

注：依赖jquery.js和json2.js。

运行效果：

---aa

---dd

---dddd

---undefined

---0,0,obj2.data[0].color

---{"chart":{"yAxisName":"ee"},"data":[{"label":0,"value":0,"color":"76A5DB"},{"label":2,"value":10,"color":"76A5DB"}]}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航