Elm -- 将文本文件解析为 Html

Question

我是 Elm 的新手（总体而言也是 FP 的新手）我在思考如何做某些事情时遇到了一些麻烦。

我目前正在使用端口读取文本文件并将其传递给 elm (index.html):

<script type="text/javascript">
  // Show the stamp module in the "elm-div" div.
  var div = document.getElementById('elm-div');
  var golf = Elm.embed(Elm.Golf, div, { reset:[], openFromFile: "" });

  var upload = document.getElementById('fileinput');

  upload.onchange = function (e) {
      reader = new FileReader();

      reader.onload = function (event) {
          data = event.target.result;
          //file's text data is sent to 'openfromfile' port
          golf.ports.openFromFile.send(data);
          }
      reader.readAsText(upload.files[0]);
      };
</script>

Golf.elm（到目前为止）：

module Golf where

import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Color exposing (..)
import Signal exposing ((<~),(~))
import String

port reset : Signal ()   
port openFromFile : Signal String

getLines : Signal (List String)
getLines = String.lines <~ openFromFile

我无法思考 Golf.elm 文件的结构。我有 CSV 格式的文本数据（由“,”分隔），其中：

"Round Number", "Par", "steve", "kyle", "rick"
1, 3, 5, 8, 1
2, 5, 3, 7, 8
3, 4, 6, 5, 4
4, 3, 2, 4, 3
5, 2, 5, 7, 4

我想要做的是读取 CSV 并显示一个 html table 以及每个 player/round 的相对于标准杆的分数（分数 = 数字 - 标准杆）但事实我不是从记录格式的常规模型开始的，而是 Signal (List String) 让我完全迷失了。

我通过端口将我的 getLines 发送回 console.log 它所以我知道我正在正确读取文件并从文本源正确生成 Signal (List String) 但我没有从这往哪儿走。

Answer 1

说明

您可以从类型开始：

type alias CSV = { headers : Maybe (List String)
                 , records : List  (List String)
                 }

您有：

getLines : Signal (List String)

但需要：

getCSV   : Signal CSV

使用核心Signal.map:

map : (a -> result) -> Signal a -> Signal result

然后类型签名将是 (a = List String, result = CSV):

map0     : (List String -> CSV) -> Signal (List String) -> Signal CSV

缺少的部分是：

parseCSV : List String -> CSV

将所有东西组合在一起：

getCSV : Signal CSV
getCSV = Signal.map parseCSV getLines

结果

-- ...

getCSV : Signal CSV
getCSV = Signal.map badParseCSV getLines

type alias CSV = { headers : Maybe (List String)
                 , records : List  (List String)
                 }

badParseCSV : List String -> CSV
badParseCSV xs =
  let parseLine = List.map (trimQuotes << String.trim)
              <<  String.split ","
      trimQuotes x = if String.startsWith "\"" x 
                     && String.endsWith "\"" x
                     then String.dropRight 1 <| String.dropLeft 1 x
                     else x
      records0 = List.map parseLine
              <| List.filter (\x -> not (String.isEmpty x))
              <| List.drop 1 xs
      headers0 = Maybe.map parseLine <| List.head xs
  in  { headers = headers0
      , records = records0}

view : CSV -> Html
view csv =
  let rows    = List.map (\xs -> Html.tr [] (cols xs)) csv.records
      cols xs = List.map col xs
      col  x  = Html.td [] [ text x]
      ths  xs = List.map (\x -> Html.th [] [text x]) xs
      headers = Maybe.withDefault [] <| Maybe.map ths csv.headers
  in Html.table [] [ Html.thead [] headers
                   , Html.tbody [] rows
                   ]

main : Signal Html
main = Signal.map view getCSV

Elm -- 将文本文件解析为 Html

Elm -- parse text file into Html

html

csv

parsing

elm

说明

结果