Elm: How to print a model in a browser?

Question

This question is pretty dumb, but I did not find a direct solution.

Assuming I have a model that looks like this: - at least this one is big.

initModel =
{ selectedCategory = "Vacantion"
, context = "root/Work"
, abstractSyntaxTree =
    [ { categoryName = "Work"
      , categoryContent =
            []
      }
    , { categoryName = "Vacation"
      , categoryContent =
            [ { folderName = "Hawaii"
              , folderContent =
                    FolderContent
                        ( [ { folderName = "Booking"
                            , folderContent = FolderContent ( [], [] )
                            }
                          ]
                        , [ "flightTicket.jpg" ]
                        )
              }
            ]
      }
    ]
}

Question: How can I display it in a browser so that it looks good? - nothing special - just see what happens as a quick debugger ..

What I have tried so far:

view = 
    div [] 
        [ pre [style [("width", "300") ] ] [ text (toString model)]
        ]

Works great on smaller models, but in this case, I get this long -single line in the format of a json-like structure:

, : prettify, Google Chrome, , , \n . , \n - , .

text (toSting model) - , \n - , - 300 .

- \n - , , , \n. , . , , ... .. , . , . ..

, , ?

Answer 1

. . "" .

---

: , , 0.19.

() toString, . Elm 0.17 ( ), 0.18 Elm , .

---

toString, . , / elm-lang.org/try.

viewModel, . , , , , ..

import Html exposing (Html, text, div, p, pre)
import Html.Attributes exposing (style)
import String

quote = "\""
indentChars = "[{("
outdentChars = "}])"
newLineChars = ","
uniqueHead = "##FORMAT##"
incr = 20


model = 
  { name = "Abe"
  , age = 49
  , someTuple = (18,49)
  , relatives = [ "Claire", "Bill" ]
  , comments = "any special characters like []{}, will not be parsed"
  , cars = [ { brand = "BMW", model = "535i" } ]
  }

viewModel : a -> Html msg
viewModel model =
  let
    lines =
      model
      |> toString
      |> formatString False 0 
      |> String.split uniqueHead
  in
    pre [] <| List.map viewLine lines

viewLine : String -> Html msg
viewLine lineStr =
  let
    (indent, lineTxt) = splitLine lineStr
  in
    p [ style 
        [ ("paddingLeft", px (indent))
        , ("marginTop", "0px")
        , ("marginBottom", "0px")
        ] 
      ]
      [ text lineTxt ]


px : Int -> String
px int =
  toString int
  ++ "px"

formatString : Bool -> Int -> String -> String
formatString isInQuotes indent str =
  case String.left 1 str of
    "" -> ""

    firstChar -> 
      if isInQuotes then
        if firstChar == quote then
          firstChar 
          ++ formatString (not isInQuotes) indent (String.dropLeft 1 str)
        else
          firstChar 
          ++ formatString isInQuotes indent (String.dropLeft 1 str)
      else
        if String.contains firstChar newLineChars then
          uniqueHead ++ pad indent ++ firstChar
          ++ formatString isInQuotes indent (String.dropLeft 1 str)
        else if String.contains firstChar indentChars then
          uniqueHead ++ pad (indent + incr) ++ firstChar
          ++ formatString isInQuotes (indent + incr) (String.dropLeft 1 str)
        else if String.contains firstChar outdentChars then
          firstChar ++ uniqueHead ++ pad (indent - incr)
          ++ formatString isInQuotes (indent - incr) (String.dropLeft 1 str)
        else if firstChar == quote then
          firstChar 
          ++ formatString (not isInQuotes) indent (String.dropLeft 1 str)
        else
          firstChar 
          ++ formatString isInQuotes indent (String.dropLeft 1 str)

pad : Int -> String
pad indent =
  String.padLeft 5 '0' <| toString indent

splitLine : String -> (Int, String)
splitLine line =
  let
    indent = 
      String.left 5 line
      |> String.toInt
      |> Result.withDefault 0
    newLine =
      String.dropLeft 5 line
  in
    (indent, newLine)

main =
  viewModel model

Answer 2

0,19.

elm install ThinkAlexandria/elm-pretty-print-json

json = """{"name": "Arnold", "age": 70, "isStrong": true,"knownWeakness": null,"nicknames": ["Terminator", "The Governator"],"extra": {"foo": "bar","zap": {"cat": 1,"dog": 2},"transport": [[ "ford", "chevy" ],[ "TGV", "bullet train", "steam" ]]}}"""

{-| Formating configuration.
'indent' is the number of spaces in an indent.
'columns' is the desired column width of the formatted string. The formatter
will try to fit it as best as possible to the column width, but can still
exceed this limit. The maximum column width of the formatted string is
unbounded.
-}
config = {indent = 4, columns = 80}

-- run prettifier
Result.withDefault "" (Json.Print.prettyString config json)

-- result
{-
{
    "extra": {
        "transport": [
            [
                "ford",
                "chevy"
            ],
            [
                "TGV",
                "bullet train",
                "steam"
            ]
        ],
        "zap": {
            "dog": 2,
            "cat": 1
        },
        "foo": "bar"
    },
    "nicknames": [
        "Terminator",
        "The Governator"
    ],
    "knownWeakness": null,
    "isStrong": true,
    "age": 70,
    "name": "Arnold"
}
-}

Answer 3

: elm-debug-transformer

, , , , , node.js, .