从 JSON 文件读取数据

假设我有一个 JSON 文件位于http://www.randomurl.com/jobs.json http://www.randomurl.com/jobs.json，它看起来像这样：

{ "jobs": [
  { "task" : "turn burgers" ,
    "who" : "Anni" ,
    "place" : "Quick"}
  , 
  { "task" : "dishes" ,
    "who" : "Bob" ,
    "place" : "McDo"}
]}

我做了一个解码器：

type alias Job = {
  task : String
, who : String
, place: String 
}

type alias Jobs  = List Job

decoder : Decoder Job
decoder =
  Decode.object3 Job
    (Decode.at ["attributes", "task"] Decode.string)
    (Decode.at ["attributes", "who"] Decode.string)
    (Decode.at ["attributes", "place"] Decode.string)

decoderColl : Decoder Jobs
decoderColl =
  Decode.object1 identity
    ("jobs" := Decode.list decoder)

如何使用我的解码器从该网站读取文件？我想我需要 Http 包，但我不知道如何应用它。

首先——你的decoder功能略有关闭。没有中间“属性”对象，因此您可以将其更改为：

decoder : Decoder Job
decoder =
  Decode.object3 Job
    ("task" := Decode.string)
    ("who" := Decode.string)
    ("place" := Decode.string)

你是对的，你需要elm-http http://package.elm-lang.org/packages/evancz/elm-http/latest/包裹。使用它，您可以创建一个Http.get将结果映射到操作的任务。

作为一个基本示例，让我们创建一个按钮，用于从 URL 中下拉职位列表。我们需要一个GetJobs触发 HTTP 请求的操作，以及ShowJobs请求成功返回时将触发的操作。

假设我们的 Action 类型如下所示：

type Action
  = NoOp
  | GetJobs
  | ShowJobs (Maybe Jobs)

然后我们可以创建一个getJobs构建可以运行的任务的函数。对于这个简单的例子，我们可以使用Task.toMaybe抑制任何 HTTP 或 JSON 解码错误。

getJobs : Effects Action
getJobs =
  Http.get decoderColl jobsUrl
    |> Task.toMaybe
    |> Task.map ShowJobs
    |> Effects.task

为了将它们粘合在一起，我们将使用StartApp https://github.com/evancz/start-app因为它让我们可以使用任务和效果。这是一个可以在本地构建的工作示例，假设 jobs.json 存在于同一目录中。

import Http
import StartApp
import Effects exposing (Effects,Never)
import Task
import Html exposing (..)
import Html.Events exposing (..)
import Json.Decode as Decode exposing (Decoder, (:=))

jobsUrl = "./jobs.json"

-- StartApp plumbing
app =
  StartApp.start { init = init, view = view, update = update, inputs = [] }

main =
  app.html

port tasks : Signal (Task.Task Never ())
port tasks =
  app.tasks


type Action
  = NoOp
  | GetJobs
  | ShowJobs (Maybe Jobs)

type alias Model =
  { jobs : Maybe Jobs }

init =
  ({ jobs = Nothing }, Effects.none)

update action model =
  case action of
    NoOp ->
      (model, Effects.none)
    GetJobs ->
      ({ model | jobs = Nothing }, getJobs)
    ShowJobs maybeJobs ->
      ({ model | jobs = maybeJobs }, Effects.none)

view address model =
  div []
    [ button [ onClick address GetJobs ] [ text "Click to get jobs!" ]
    , viewJobs model.jobs
    ]

viewJobs maybeJobs =
  let
    viewJob job =
      li [] [ text ("Task: " ++ job.task ++ "; Who: " ++ job.who ++ "; Place: " ++ job.place) ]
  in
    case maybeJobs of
      Nothing ->
        div [] [ text "No jobs to display. Try clicking the button" ]
      Just jobs ->
        ul [] (List.map viewJob jobs)

-- This is the key to map the result of the HTTP GET to an Action
-- Note: Task.toMaybe swallows any HTTP or JSON decoding errors
getJobs : Effects Action
getJobs =
  Http.get decoderColl jobsUrl
    |> Task.toMaybe
    |> Task.map ShowJobs
    |> Effects.task

-- An alternative to Task.toMaybe which dumps error information to the console log
toMaybeWithLogging : Task.Task x a -> Task.Task y (Maybe a)
toMaybeWithLogging task =
  Task.map Just task `Task.onError` (\msg -> Debug.log (toString msg) (Task.succeed Nothing))

-- The Job type aliases from the question
type alias Job = {
  task : String
  , who : String
  , place: String 
}

type alias Jobs  = List Job

-- The updated Job decoder
decoder : Decoder Job
decoder =
  Decode.object3 Job
    ("task" := Decode.string)
    ("who" := Decode.string)
    ("place" := Decode.string)

decoderColl : Decoder Jobs
decoderColl =
  Decode.object1 identity
    ("jobs" := Decode.list decoder)