2015-04-22 53 views
0

我試圖編碼oauth2 diagram作爲json對象中的字符串。但是,當我使用內置的js parseJSON函數「解碼」它的輸出看起來破碎。任何想法爲什麼或如何編碼它?如何將文本圖編碼爲json?

Plunkr

function show(){ 
    var diagram = ' +----------+\ 
    | Resource |\ 
    | Owner |\ 
    |   |\ 
    +----------+\ 
      ^\ 
      |\ 
     (B)\ 
    +----|-----+   Client Identifier  +---------------+\ 
    |   -+----(A)-- & Redirection URI --->|    |\ 
    | User- |        | Authorization |\ 
    | Agent -|----(B)-- User authenticates -->|  Server |\ 
    |   |        |    |\ 
    |   |<---(C)--- Redirection URI ----<|    |\ 
    |   |   with Access Token  +---------------+\ 
    |   |   in Fragment\ 
    |   |        +---------------+\ 
    |   |----(D)--- Redirection URI ---->| Web-Hosted |\ 
    |   |   without Fragment  |  Client |\ 
    |   |        | Resource |\ 
    |  (F) |<---(E)------- Script ---------<|    |\ 
    |   |        +---------------+\ 
    +-|--------+\ 
     | |\ 
     (A) (G) Access Token\ 
     | |\ 
    ^ v\ 
    +---------+\ 
    |   |\ 
    | Client |\ 
    |   |\ 
    +---------+\ 
' 
    x = JSON.stringify(diagram) 
    document.write(JSON.parse(x)); 
} 

結果

+----------+ | Resource | | Owner | | | +----------+^| (B) +----|-----+ Client Identifier +---------------+ | -+----(A)-- & Redirection URI --->| | | User- | | Authorization | | Agent -|----(B)-- User authenticates -->| Server | | | | | | |<---(C)--- Redirection URI ----<| | | | with Access Token +---------------+ | | in Fragment | | +---------------+ | |----(D)--- Redirection URI ---->| Web-Hosted | | | without Fragment | Client | | | | Resource | | (F) |<---(E)------- Script ---------<| | | | +---------------+ +-|--------+ | | (A) (G) Access Token | |^v +---------+ | | | Client | | | +---------+ 

UPDATE:這不工作,要麼

// Code goes here 

function show(){ 
    var diagram = ' +----------+\n\ 
    | Resource |\n\ 
    | Owner |\n\ 
    |   |\n\ 
    +----------+\n\ 
      ^\n\ 
      |\n\ 
     (B)\n\ 
    +----|-----+   Client Identifier  +---------------+\n\ 
    |   -+----(A)-- & Redirection URI --->|    |\n\ 
    | User- |        | Authorization |\n\ 
    | Agent -|----(B)-- User authenticates -->|  Server |\n\ 
    |   |        |    |\n\ 
    |   |<---(C)--- Redirection URI ----<|    |\n\ 
    |   |   with Access Token  +---------------+\n\ 
    |   |   in Fragment\n\ 
    |   |        +---------------+\n\ 
    |   |----(D)--- Redirection URI ---->| Web-Hosted |\n\ 
    |   |   without Fragment  |  Client |\n\ 
    |   |        | Resource |\n\ 
    |  (F) |<---(E)------- Script ---------<|    |\n\ 
    |   |        +---------------+\n\ 
    +-|--------+\n\ 
     | |\n\ 
     (A) (G) Access Token\n\ 
     | |\n\ 
    ^ v\n\ 
    +---------+\n\ 
    |   |\n\ 
    | Client |\n\ 
    |   |\n\ 
    +---------+\n\ 
' 
    x = JSON.stringify(diagram) 
    document.write("<p>"+ JSON.parse(x) +"</p>"); 
} 
+0

如果你輸出到HTML,您將需要'空白:預包裝'或'
'標籤 – Eric

+0

@tags預包裝似乎沒有太大的幫助http://plnkr.co/edit/P6L0wGv5fMz7ZkgdnG7w?p=preview –

+1

這是因爲'document.write'是可怕的並完全抹去文檔的其餘部分(如包含樣式表的鏈接標記) – Eric

回答

1

在源代碼中的換行上市是不是字符串本身的一部分。如果您希望它們成爲字符串的一部分,則需要添加換行符(\n)。

如果您將字符串轉換爲JSON並將JSON轉換回字符串,則可能會遇到其他問題,也可能不會遇到其他問題。但以上是您需要解決的第一個問題。

我所看到的解決多線怪異問題的一個訣竅是根本沒有多線字符串,而是有一個字符串數組,其中每個字符串表示多行字符串中的一行。

+0

我不知道如果我得到這個權利,但突破人物似乎並沒有工作。 http://plnkr.co/edit/P6L0wGv5fMz7ZkgdnG7w?p=preview –

0

white-space: pre修復問題

.pre { 
    white-space: pre; 
} 

新線也應該有休息字符(\n),所以一半功勞應該去特洛特