使用Enum构建选择HTML选项

Question

假设map = %{"One" => 1, "Two" => 2,"Three" => 3}

我正在尝试为select选项构建字符串，例如：

<option value=1> "One" </option> 
<option value=2> "Two" </option> 
<option value=3> "Three" </option> 

这是我目前的代码：

options = Enum.reduce map, %{}, fn x, y ->
options = """
  <option value=#{x}>#{x}</option>
 """
end

但是我收到了这个错误：

Protocol.UndefinedError) protocol String.Chars not implemented for 
{"One", 1 }

我怎样才能做到这一点？

Answer 1

你的代码的问题是Enum.reduce/3的函数有两个参数，一个作为累加器，另一个作为枚举中的元素（它本身就是一个双元素元组）。

您正在尝试在字符串中插入整个元组（例如{"One", 1}），但它没有实现String协议，因此会引发错误。你可以尝试这样的事情：

Enum.reduce(map, "", fn {x, y}, acc ->
  "#{acc}\n<option value=#{x}>#{y}</option>"
end)

如果您使用的是 Phoenix Framework ，最好使用select/4帮助器。否则，另一种方法是使用Enum.map/2和Enum.join/2代替：

map
|> Enum.map(fn {x, y} -> "<option value=#{y}>#{x}</option>" end)
|> Enum.join("\n")