iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

學會Elm寫前端系列 第 7

07 如何在Elm裡讀Json?

JSON decoding

Elm裡有完整的JSON decoding 的library,
讓你可以和server溝通,之後幾天我們來寫寫關於如何和伺服器溝通,或是你現在其實有一個小的專案,但你只是想要試試看Elm,不想要整個採用的話,Elm也有方式可以和其他Javascript溝通。今天我們先來看看JSON decoder。

decodeString : Decoder a -> String -> Result String a

這個最常用的function了, decodeString 。JSON傳進入elm時,都會被當成string。
但是string有很多種,我們可以看到decodeString 有兩個parameters,一個是Decoder a , 另一個是 String 。 Decoder有幫我們內建了,不需要再自己造常用的decoder

string : Decoder String
int : Decoder Int
float : Decoder Float
bool : Decoder Bool
> import Json.Decode exposing (..)

> decodeString int "42"
Ok 42 : Result String Int

> decodeString float "3.14159"
Ok 3.14159 : Result String Float

> decodeString bool "true"
Ok True : Result String Bool

如果是比較大的object怎麼辦?

早先的elm 有個叫 object3的,現在已經不用了。官方現在也推薦這個:elm-decode-pipeline
來解析比較大型的JSON object。

"""
{"id": 123, "email": "sam@example.com", "name": "Sam Sample"}
"""

譬如說這個好了,那怎麼辦呢?

import Json.Decode exposing (int, string, float, Decoder)
import Json.Decode.Pipeline exposing (decode, required, optional, hardcoded)

type alias User =
  { id : Int
  , email : Maybe String
  , name : String
  }

userDecoder : Decoder User
userDecoder =
  decode User
    |> required "id" int
    |> required "email" (nullable string) -- `null` decodes to `Nothing`
    |> optional "name" string "(fallback if name is `null` or not present)"

我們可以自己命名一個 type alias 叫 User, 然後 有 id, email, name。接著我們也可以自己造一個
userDecoder ,這裡的 |> pipe-operator 就是 Json.Decode.Pipeline 所提供的。

你就可以用:

Json.Decode.decodeString
  userDecoder
  """
    {"id": 123, "email": "sam@example.com", "name": "Sam Sample"}
  """
--{ id = 123
--, email = "sam@example.com"
--, name = "Sam Sample"
--}

明天再來說說如何和Server 溝通?


上一篇
06 認識Elm裡的類別(type system)
下一篇
08 如何讓Elm和server說上話?
系列文
學會Elm寫前端30

尚未有邦友留言

立即登入留言