Question

我们很难从JSON数据填写表格并需要帮助。该组件是关于在给定城市的区域中选择病房。数据结构是City，Districts和Wards的树，具有大致以下结构（所有内容都包含在GeoJSON中）：

// Cities: '/api/cities/berlin'
{
  features: [
    {
        type: "Feature",
      properties: { 
        slug: "berlin",
        name: "Berlin",
        districts: [
          {name: "Neukölln", slug: "neukolln", ...}
        ]
        },
      geometries: {...}
    } 
  ]
}

// Districts: '/api/cities/berlin/districts/neukolln'
{
  features: [
    {
        type: "Feature",
      properties: { 
        slug: "neukolln",
        name: "Neukölln",
        wards: [
          {name: "Britz", slug: "britz", ...}
        ]
        },
      geometries: {...}
    } 
  ]
}

// Wards: '/api/cities/berlin/districts/neukolln/wards'
{
  features: [
    {
        type: "Feature",
      properties: { 
        slug: "britz",
        name: "Britz",
        },
      geometries: {...}
    } 
  ]
}

在视图中，三个是用于选择城市，区和病房的三个下拉框，因此，当用户选择城市时，区域下拉列表将从JSON响应的properties.districts字段填充。同样适用于区域下拉菜单：来自properties.wards的病房当页面加载时，它已经注入了所有可用城市的JSON（以及相应的区域）

您会建议采取什么策略：

1）如何获取当前选定的城市并点击下一个行政区划服务器？即当用户选择区域时，获取其slug和查询服务器的病房？

2）如何从响应中填充后续选择或在页面上注入JSON？即当用户选择另一个城市时，请在区域选择框中填写相应的区域？

Answer 1

以下是我过去做过类似事情的方式（在elm v0.17.0中）：

dropdown : List City -> Html Msg
dropdown cities =
    div []
        [ div []
              [ span [] [ text "dropdown label name" ]
              , selectOptions cities
              ]
        ]


selectOptions : List City -> Html Msg
selectOptions cities = 
      select [ on "change" ( Json.map (\city -> GetDistrictsMsg city) targetValue ) ]
            (List.map setOption cities)


setOption : City -> Html Msg
setOption city =
    option [ value city.name ]
           [ text city.name ]

你会为地区重复同样的事情。

Answer 2

起动

如果已知选定城市，则在启动之前，您可以将标记作为Html.App.programWithFlags

传入

你可以对城市列表做同样的事情。

请参阅http示例，它涵盖了大部分内容。

如果您想在启动时发送xhr请求，您可能会使用一些巧妙的技巧：

init : String -> (Model, Cmd Msg)
init topic =
  ( Model topic "waiting.gif"
  , getRandomGif topic
  )

getRandomGif将在启动时执行xhr请求，假设您已将某些数据作为标记或用户输入传递给它们。

在每个FetchSucceed上，您应发送下一个xhr以获取下一步的数据。

流程

请考虑此流程图，说明多步骤表单的流程。虚线箭头指向步骤，如果您想在某个时刻更改城市/地区，可以重新开始循环。

缓存层是可选的，Elm为此提供了各种数据结构。

如何在Elm的JSON中填写几个下拉列表？

2 个答案:

起动

流程