JavaScript to Json 基本觀念

緣起

有個朋友詢問我angular.toJson這 function為什麼不能轉換到Json，他只是把他的angularJS 更換到 1.4.7 版本。
經過了解後，才知道他對於JavaScript一些觀念不是相當清楚，至於他的問題也不是angularJS的問題，是他套用的某一個對岸套件影響的，所以他才一直以為錯誤的使用方式是可行的 xd。

Angular JS 部分

一開始想說會不會是更新angularJs的關係，所以就查看了一下 1.4.7 的source code

toJson

/**
 * @ngdoc function
 * @name angular.toJson
 * @module ng
 * @kind function
 *
 * @description
 * Serializes input into a JSON-formatted string. Properties with leading $$ characters will be
 * stripped since angular uses this notation internally.
 *
 * @param {Object|Array|Date|string|number} obj Input to be serialized into JSON.
 * @param {boolean|number} [pretty=2] If set to true, the JSON output will contain newlines and whitespace.
 *    If set to an integer, the JSON output will contain that many spaces per indentation.
 * @returns {string|undefined} JSON-ified string representing `obj`.
 */
function toJson(obj, pretty) {
  if (typeof obj === 'undefined') return undefined;
  if (!isNumber(pretty)) {
    pretty = pretty ? 2 : null;
  }
  return JSON.stringify(obj, toJsonReplacer, pretty);
}

結果發現這段轉換很久沒更動過了，最後一次更改還是 2014/2/15(想查看的，自己在 NG github 切換到 Blame 查看)，而且仔細看看這 function 內容，還是使用JSON.stringify這函式。

JSON.stringify

再看一次JSON.stringify這函式的意義

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.

清楚明白的寫著可以將JavaScript值序列化成JSON

範例對比

錯誤用法

var foo = [];
foo.bar = "new property";
foo.baz = 3;
var jsonString = JSON.stringify(foo);

jsonString 會輸出 []

正確用法

var foo = {};
foo.bar = "new property";
foo.baz = 3;
var jsonString = JSON.stringify(foo);

jsonString 會輸出 "{\"bar\":\"new property\",\"baz\":3}"

說明

兩個範例的差別主要在foo一個是 array，一個是 object，所以在宣告完var foo之後，以下這兩個動作

foo.bar = "new property";
foo.baz = 3;

在 array 的範例中，是指定 foo 的屬性，但是該 foo 的值為 []。
在 object 的例子，則是 foo 的值就是一個物件，且bar與baz都設定是該物件的屬性。
而JSON.stringify是轉換值為Json，所以一個是 []，一個是屬性資料。

參考資料

• MDN:json.stringify()
• w3schools:JavaScript JSON
• AngularJS:angular.toJson
• Github:Angular.Js Source Code