Json详解2-对上一篇文章（Json）例子的个人操作过程

对上一篇转载文件，文件中作者提到的例子进行一步步详细操作和记录

一 版本 VS 2013

二、添加项目

三、添加HTML 页面

 

四、添加第一段代码

1，json 不同类型赋值 字符串，json字符串 , json 数组  json 对象

 var obj = {   1:"value1",
                    "2": "value2",
                     count: 3,
                     person: [ //数组结构JSON对象，可以嵌套使用
                                 {
                                     id: 1,
                                    name: "张三"
                                 },
                                {
                                    id: 2,
                                   name: "李四"
                                 }
                             ],
                    object: { //对象结构JSON对象
                              id: 1,
                               msg: "对象里的对象"
                            }
        };

无错误提醒如图：

 2、 从JSON中读数据

 出现错误提醒

 

将内容修改成备注里的内容，不再报错，而下面两个json数组和对象则不再报错，可以直接用"." 带出来， 如图

3 向JSON中写数据

比如要往JSON中增加一条数据，代码如下：

 继续往<script></script>文件中添加内容

function Add() { 
            //往JSON对象中增加了一条记录
            obj.sex= "男" //或者obj["sex"]="男"
        }

增加数据后的JSON对象作者在图出的内容是怎么查看到的：

现在将上面的代码运行一下

  （1）先将浏览器的方式设置为google 浏览器

 

（2）显示页面为空白

（3）按F12按钮，然后再点Sources

 

 （4）在source中可以看到原代码：

（5） 查看obj 对象中的各个json值 

  进入Console 选项中，

    a、录入obj（变更名) 回车

下面显示obj中的各个内容。

 

 b.直接录入 ReadJSON()  读取obj 的Json事件

 分别跳出4次alert对话框，注意第四次因为是数组，没有指定到具体哪一个，所以跳出的内容是”对象里的对象“

 

 

 c发现还是不会像作者一样直接调出obj的对象图 ，只能通过调用ReadJson()方法来查看obj 里的内容 

d 、执行 add()事件，再重新查看obj 的内容，

  执行Add()回车 

再执行 obj 回车，增加一条记录，如图

 

e 更新一条记录

function Update() {
            obj.count = 10; //或obj["count"]=10
        }

 

删除一条记录

function Delete(){

delete obj.count;
}

 

执行遍历

function Traversal() {
            for (var c in obj) {
                console.log(c + ":", obj[c]);
            }
        }

调用与输出

 

 

接下来应该学一下google浏览器的调试。

不过作者的代码各功能都已经实现，目的已经达到，就是手动逐步实现json 的赋值和读取。

先到这里。