Elm - parsing a text file into Html
I am very new to Elm (and new to FP in general). I'm having trouble doing some things.
I am using ports currently to read in a text file and pass it to 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 text data is sent to 'openfromfile' port
golf.ports.openFromFile.send(data);
}
reader.readAsText(upload.files[0]);
};
</script>
Golf.elm (for now):
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
I am having a hard time thinking about how the Golf.elm file should be structured. I have CSV text data (delimited by ',') where:
"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
What I want to do is read the CSV and show the html table with the scores versus par for each player / round (score = number - par), but the fact is that I am not starting with a normal model in the record format, but Signal (List String)
completely lost me.
I have sent mine getLines
back through ports in console.log
so that I know I am reading the file correctly and generating correctly Signal (List String)
from a text source, but I have nowhere to go from here.
source to share
Explanation
You can start with types:
type alias CSV = { headers : Maybe (List String)
, records : List (List String)
}
You have:
getLines : Signal (List String)
but it is necessary:
getCSV : Signal CSV
Use core Signal.map :
map : (a -> result) -> Signal a -> Signal result
Then the type signature will be (a = List String
, result = CSV
):
map0 : (List String -> CSV) -> Signal (List String) -> Signal CSV
Part missing:
parseCSV : List String -> CSV
Put all things together:
getCSV : Signal CSV getCSV = Signal.map parseCSV getLines
Result
-- ...
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
source to share