如何在Elm中从JSON中填充多个后续下拉列表？

Question

我们不得不从JSON数据中填写表单，需要帮助。该组件用于选择给定城市所在地区的选区。数据结构是一个由城市、区和区组成的树，结构大致如下(所有内容都包装在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的后续select？例如，当用户选择另一个城市时，是否用相应的地区填充地区选择框？

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 ]

您将对地区重复相同的操作以获得wards。

Answer 2

启动

如果所选城市已知，则在启动之前，您可以将其作为标志传递给Html.App.programWithFlags

您可以对城市列表执行相同的操作。

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

如果你想在启动时发送xhr请求，你可以使用一个小技巧：

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

其中getRandomGif将在启动时执行xhr请求，假设您已经通过将它们作为标志传递或从用户输入中获得了一些数据。

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

流程

请考虑此流程图，说明您的多步表单的流程。虚线箭头指向步骤，如果您想要在某个点更改城市/地区，则可以在其中重新启动循环。

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

​

​