Question

我是榆树的新手，我发现从http响应中解码json非常困难。
我正在制作的应用是拨打电话给gravatar并收到个人资料。我想从响应中提取一些字段并将其放入记录中，而记录又显示在视图中。这是我的代码：

-- MODEL

type alias MentorRecord =
    { displayName : String
    , aboutMe : String
    , currentLocation : String
    , thumbnailUrl : String
    }

type alias Model =
    { newMentorEmail : String
    , newMentor : MentorRecord
    , mentors : List MentorRecord
    }

init : ( Model, Cmd Msg )
init =
    ( Model "" (MentorRecord "" "" "" "") [], Cmd.none )

-- UPDATE

type Msg
    = MentorEmail String
    | AddMentor
    | GravatarMentor (Result Http.Error MentorRecord)
    | RemoveMentor

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MentorEmail newEmail ->
            ( { model | newMentorEmail = newEmail }, Cmd.none )
        AddMentor ->
            ( model, getGravatarMentor model.newMentorEmail )
        GravatarMentor (Ok addedMentor) ->
            ( Model "" addedMentor (addedMentor :: model.mentors)
            , Cmd.none
            )
        GravatarMentor (Err _) ->
            ( model, Cmd.none )
        RemoveMentor ->
            ( model, Cmd.none )

-- VIEW
view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "Email adress mentor", onInput MentorEmail ] []
        , button [ onClick AddMentor ] [ text "Add Mentor" ]
        , br [] []
        , img [ src (createIconUrl model.newMentorEmail) ] []
        , div [] [ text model.newMentor.displayName ]
        , div [] [ toHtmlImgList model.mentors ]
        ]

toHtmlImgList : List MentorRecord -> Html Msg
toHtmlImgList mentors =
    ul [] (List.map toLiImg mentors)

toLiImg : MentorRecord -> Html Msg
toLiImg mentor =
    li [] [ img [ src mentor.thumbnailUrl ] [] ]

-- HTTP

getGravatarMentor : String -> Cmd Msg
getGravatarMentor newMentorEmail =
    Http.send GravatarMentor
        (Http.get (createProfileUrl newMentorEmail) decodeGravatarResponse)

createProfileUrl : String -> String
createProfileUrl email =
    "https://en.gravatar.com/" ++ MD5.hex email ++ ".json"

createIconUrl : String -> String
createIconUrl email =
    "https://www.gravatar.com/avatar/" ++ MD5.hex email

decodeGravatarResponse : Decoder MentorRecord
decodeGravatarResponse =
    let
        mentorDecoder =
            Json.Decode.Pipeline.decode MentorRecord
                |> Json.Decode.Pipeline.required "displayName" string
                |> Json.Decode.Pipeline.required "aboutMe" string
                |> Json.Decode.Pipeline.required "currentLocation" string
                |> Json.Decode.Pipeline.required "thumbnailUrl" string
    in
        at [ "entry" ] mentorDecoder

如果填写了有效的电子邮件地址（即带有重力曲线配置文件的地址），则会看到图标。但是这段代码也应该做的是从另一个http响应中提取名称，位置，关于我信息，thumbnailUrl，将其放入列表中，并在视图中显示它。如果您点击“添加指导者”

，那就不会发生这种情况

所以我猜解码部分进展不顺利，但我不确定（也许是因为嵌套元素在列表中？）。

来自gravatar的回复看起来像这样（删除了条目中的一些字段）：

{ "entry": [
    {
    "preferredUsername": "bla",
    "thumbnailUrl": "https://secure.gravatar.com/avatar/hashinghere",
    "displayName": "anne",
    "aboutMe": "Something...",
    "currentLocation": "Somewhere",
    }
]}

Ellie app中的代码：https://ellie-app.com/n5dxHhvQPa1/1

Answer 1

entry是一个数组。要解码数组第一个元素的内容，您需要使用Json.Decode.index。

变化：

(at [ "entry" ]) mentorDecoder

到

(at [ "entry" ] << index 0) mentorDecoder

但更大的问题是Gravatar不支持跨源请求（CORS），只支持JSONP。 elm-http不支持JSONP。您可以使用端口或使用第三方服务，这使您可以向任意站点发出CORS请求。我在下面的ellie链接中使用了后者，但您应该在实际的生产应用程序中使用端口或您自己的CORS代理。

我还aboutMe和currentLocation可选，因为我们检查过的个人资料中没有这些内容。这是链接：https://ellie-app.com/pS2WKpJrFa1/0

原始功能：

createProfileUrl : String -> String
createProfileUrl email =
    "https://en.gravatar.com/" ++ MD5.hex email ++ ".json"

decodeGravatarResponse : Decoder MentorRecord
decodeGravatarResponse =
    let
        mentorDecoder =
            Json.Decode.Pipeline.decode MentorRecord
                |> Json.Decode.Pipeline.required "displayName" string
                |> Json.Decode.Pipeline.required "aboutMe" string
                |> Json.Decode.Pipeline.required "currentLocation" string
                |> Json.Decode.Pipeline.required "thumbnailUrl" string
    in
        at [ "entry" ] mentorDecoder

更改的功能：

createProfileUrl : String -> String
createProfileUrl email =
    "https://crossorigin.me/https://en.gravatar.com/" ++ MD5.hex email ++ ".json"

decodeGravatarResponse : Decoder MentorRecord
decodeGravatarResponse =
    let
        mentorDecoder =
            Json.Decode.Pipeline.decode MentorRecord
                |> Json.Decode.Pipeline.required "displayName" string
                |> Json.Decode.Pipeline.optional "aboutMe" string ""
                |> Json.Decode.Pipeline.optional "currentLocation" string ""
                |> Json.Decode.Pipeline.required "thumbnailUrl" string
    in
    (at [ "entry" ] << index 0) mentorDecoder

榆树：从http响应中解码json并显示它

1 个答案: