JavaScript JSON

JSON语法

JSON语言可以表示一下三种类型的值：

1. 简单值，使用与JavaScript相同的语法，可以在JSON中表示字符串，数值，布尔值，和null，但JSON不支持JavaScript中的特殊值undefined;
2. 对象：对象作为一种复杂数据类型，表示是一组有序的键值对。而每个键值对中的值可以是简单之，也可以是复杂数据类型的值；
3. 数组：数组也是一种复杂数据类型，表示一组有序的值得列表。可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。

简单值

最简单的JSON数据形式就是简单值

5
"Hello world"
true
null

JavaScript字符串与JSON字符串的最大区别在于，JSON字符串必须使用双引号(单引号会导致语法错误)。

对象

JSON中的对象与JavaScript字面量稍微有一些不同。

var person = {
  name: "张飒",
  age: 18
}

JSON表示上述对象方式

{
  "name": "张三",
  "age": 18
}

数组

JSON中的第二种复杂数据类型是数组。JSON数组采用的就是Javascript中数组字面量形式。

var value = [25, 10, "张三"]

JSON中，可以采用同样语法表示同一个数组

[
  {
    "title":"张三",
    "age": 18
  },
  {
    "title":"李四",
    "age": 18
  },
]

解析与序列化

doc.getElementsByTagName("book")[2].getAttribute("title")

JSON 对象

var book = {
  title: "张三",
  authors: [
    "李四"
  ],
  edition: 3,
  year: 2019,
};
var jsonText = JSON.stringfy(book);

// stringfy对象序列化为一个JSON字符串

var bookCopy = JSON.parse(jsonText)

// 如果传给JSON.parse()的字符串不是有效的JSON，该方法会抛出错误

序列化选项

1. 过滤结果

var book = {
  "title": "标题",
  "authors": [
    "作者君"
  ],
  edition: 1,
  year: 2019
}

var jsonText = JSON.stringfy(book,["title","edition"]);

JSON.stringfy()的第二个参数是一个数组，其中包含两个字符串：”title” “edition”。这两个属性与将要序列化的对象中的属性是对应的，因此在返回的结果字符中，就只会包含着两个属性：

{"title": "标题", "edition": 1}

如果第二个参数是函数，行为会稍有不同。传入的函数接收两个参数，属性和属性值。根据属性可以知道应该如何处理要序列化的对象中的属性。

var jsonText = JSON.stringify(book, function(key, value){
  switch(key){
    case "authors":
      return value.join(",")
    case "year":
      return 2000;
    case "edition":
      return undefined;
    default:
      return value
  }
})

2. 字符串缩进

JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值，那它表示的每个级别缩进的空格数。

var jsonText = JSON.stringify(book, null, 4);

console.log(jsonText)返回结果：

{
   "title": "张三"
}

3. toJSON()方法

var book = {
  "title": "标题"
  toJSON: function () {
    return this.title;
  }
}

var jsonText = JSON.stringify(book);

解析选项

JSON.parse()方法也可以接收另一个参数，该参数是一个函数，将在每个键值对上调用。

var bookCopy = JSON.parse(jsonText, function (key, value){
  if(key === "releaseDate"){
    return new Date(value);
  } else {
    return value;
  }
});

alert(bookCopy.releaseDate.getFullYear());

ECMAScript 5定义了一个原生的JSON对象，可以用来将对象序列化为JSON字符串或者将JSON数据解析为JavaScript对象。JSON.stringify()和JSON.parse()方法分别用来实现上述两项功能。这两个方法都有一些选项，通过他们可以改变过滤的方式，或者改变序列化的过程。

JSON对象转化

<script>
//json字符串、json对象、数组 三者之间的转换
let jsonStr = '[
  {"id":"01","open":false,"pId":"0","name":"A部门"},
  {"id":"01","open":false,"pId":"0","name":"A部门"},
  {"id":"011","open":false,"pId":"01","name":"A部门"},
  {"id":"03","open":false,"pId":"0","name":"A部门"},
  {"id":"04","open":false,"pId":"0","name":"A部门"}, 
  {"id":"05","open":false,"pId":"0","name":"A部门"}, 
  {"id":"06","open":false,"pId":"0","name":"A部门"}
]';

let jsonObj = $.parseJSON(jsonStr);
//json字符串转化成json对象(jq方法)

//let jsonObj =  JSON.parse(jsonStr)
//json字符串转化成json对象（原生方法）

let jsonStr1 = JSON.stringify(jsonObj)
//json对象转化成json字符串

//console.log(jsonStr1+"jsonStr1")

//json对象转化成json数组对象
let arr1=[];
for(let i in jsonObj){
    //let o={};
    //o[i]=jsonObj[i];
    arr1.push(jsonObj[i]);            
}
//console.log(arr1);
//console.log(typeof(arr));

let jsonStr11 = JSON.stringify(arr1)
//json数组转化成json字符串
//console.log(jsonStr11);

let jsonArr = [];
for(let i in jsonObj){
        jsonArr[i] = jsonObj[i];
}

//console.log(jsonArr);
//console.log(typeof(jsonArr));

</script>

<script>
//将对象转化为数组
let obj={'未完成':5,'已完成':8,'待确认':4,'已取消':6};

let arr = [];

for (let i in obj) {

  //arr.push(obj[i]); //属性
  //arr.push(obj[i]); //值

  let o={};
  o[i]=obj[i];
  arr.push(o);
}

function objToArray(array) {
    let arr = []; 
    for (let i in array) {
        let o={};
        o[i]=array[i];
        arr.push(o); 
    }
    console.log(arr);
    //return arr;
}

// console.log(arr)
objToArray(obj);

</script>