前端處理JSON數據

• 轉義

  • 用\來進行轉義
  • 除了\本身，要轉義的還有引號、ASCII碼（如\0-\37這樣）什么的。
  • \r\n這種換行在json的字符串字段中要轉義成\r\n

• 原生的JSON即可進行json數據的處理

  • JSON.parse()

    • JSON.parse()對轉義字的符執行過程其實經歷了兩次轉義：一次是字符串本身的轉義，一次是字符串轉對象時的轉義。
      • 所以如果你想在字符串中放一個\，那么轉成JSON對象之前的字符串中就要有4個\，也就是比正常以為的要多一倍的\。
      • 不要以為很復雜，其實就是多了一倍的\。
      • 比如想要的原始字符串文本是C:\temp\datatransfer\；正常理解字符串是這個樣子："C:\temp\datatransfer\"；但是給JSON.parse()用的話，需要是這個樣子："C:\\temp\\datatransfer\\"。

  • JSON.stringfy()

    • 使用replacer控制序列化輸出，比如只輸出一部分字段。

      • replacer是一個過濾函數（jsonObject只能是一個json對象，json數組貌似不可以？）或則一個數組（jsonObject是一個json數組也可以。但不知道輸出的字段順序按數組參數順序，還是json對象中的原始字段順序？）包含要被stringify的屬性名。如果沒有定義，默認所有屬性都被stringify。

      jsonString = JSON.stringify(jsonObject, function (key, value) {
        if (fields.indexOf(key) > -1) {
          return undefined;
        } else {
          return value;
        }
      });
      
      jsonString = JSON.stringify(jsonObject, fields);
      

    • 會丟失類的成員方法，不像java、c#那樣，序列化后只會有成員變量，要自己實現反序列化回指定類，as沒用。

      • Typescript objects serialization?
      • JSON to TypeScript class instance?

    let foo: Foo = Object.assign(new Foo(), JSON.parse(fooJson));
    

    class SerializationHelper {
        static toInstance<T>(obj: T, json: string) : T {
            var jsonObj = JSON.parse(json);
    
            if (typeof obj["fromJSON"] === "function") {
                obj["fromJSON"](jsonObj);
            }
            else {
                for (var propName in jsonObj) {
                    obj[propName] = jsonObj[propName]
                }
            }
    
            return obj;
        }
    }
    
    var json = '{"name": "John Doe"}',
    foo = SerializationHelper.toInstance(new Foo(), json);
    

    class Serializable {
        fillFromJSON(json: string) {
            var jsonObj = JSON.parse(json);
            for (var propName in jsonObj) {
                this[propName] = jsonObj[propName]
            }
        }
    }
    
    class Foo extends Serializable {
        name: string;
        GetName(): string { return this.name }
    }
    
    var foo = new Foo();
    foo.fillFromJSON(json);
    

• Angular中

  • 可以直接把JSON文件當做對象/接口來使用，可以直接使用其各個字段名。
    • 如果想要讀取非json格式的文件，為了避免異步請求文件再解析的復雜度（因為運行在瀏覽器客戶端中），可以當做json文件的一個字段的字符串值（該轉義的要轉義），然后再import成json對象使用，比較方便。

  import xxx from 'src/assets/json/xxx.json';
  

  • 也可以用JSON.parse來把字符串轉成對象/接口，也可以直接使用其各個字段名（雖然這種方式可能沒有輸入提示）。