CODEWITHSUNDEEP
jsonelmffi
J.Ewa
J.Ewa

Reputation: 235

Decoding errors in elm 0.19

I am new to elm and I having a very hard time parsing a json from html to elm and using it.

This is what I am trying to do:

In my html doc:

var app = Elm.Main.init({
    node: document.getElementById("app"),
    flags: questions
});

then in elm:

main =
  Browser.element { init = init, update = update, subscriptions = subscriptions, view = view }

-- MODEL

type alias Model = 
    {
       questionsToAnswer: List QuestionToAnswer
     , currentQuestion: Int
     , initializeGame: Bool
    }

type alias QuestionToAnswer =
    {
        question: String
     ,  a: String
     ,  b: String
     ,  c: String
     ,  d: String
     ,  answer: String
    }

questionDecoder : Decoder QuestionToAnswer

questionDecoder =
    map6 QuestionToAnswer 
         (field "question" string)
         (field "A" string)
         (field "B" string)
         (field "C" string)
         (field "D" string)
         (field "answer" string)

init : Json.Decode.Value -> (Model, Cmd Msg)
init questions =
  (Model (getQuestions questions) 0 True, Cmd.none)

getQuestions : Json.Decode.Value -> List QuestionToAnswer

getQuestions questions =
 case(decodeValue questionDecoder questions) of
   Ok question ->
     [question]
   _ ->
       [ QuestionToAnswer "me" "me" "me" "me" "me" "me"]

My json looks like this:

{
  "question": "In mobster lingo, if you 'sing like a canary' what are you doing?",
  "A": "impersonating Sinatra",
  "B": "talking to the cops",
  "C": "killing an enemy",
  "D": "betting on horses",
  "answer": "B"
}

I am outputting all the response as debug.toString in the view just to see what is happening because I also don't know how to log the error that was being produced before. The compiler says my call to getQuestions questions produces a Json.Decode.error which I find difficult to believe because I think everything looks ok to me.

The error:

"{\"question\":\"In mobster lingo, if you 'sing like a canary' what are you doing?\",\"A\":\"impersonating Sinatra\",\"B\":\"talking to the cops\",\"C\":\"killing an enemy\",\"D\":\"betting on horses\",\"answer\":\"B\"}" Expecting an OBJECT with a field named question

Upvotes: 1

Views: 1143

Answers (1)

glennsl
glennsl

Reputation: 29106

It looks like you're passing a string in as flags, not a JSON object. If so, you can do one of two things:

1: Parse the JSON string on the JavaScript side, before passing it to Elm via flags:

var app = Elm.Main.init({
    node: document.getElementById("app"),
    flags: JSON.parse(questions)
});

The downside to this approach is that if an error happen during parsing it happens on the JavaScript-side and has to be handled there. If you need to deal with the error in Elm, you have to pass a more complex structure to flags that can represent both errors and success.

2: Use decodeString instead of decodeValue, and change the type of init and getQuestions accordingly:

init : String -> (Model, Cmd Msg)
init questions =
  (Model (getQuestions questions) 0 True, Cmd.none)

getQuestions : String -> List QuestionToAnswer
getQuestions questions =
 case (decodeString questionDecoder questions) of
   Ok question ->
     [question]
   _ ->
       [ QuestionToAnswer "me" "me" "me" "me" "me" "me"]

Upvotes: 3

Related Questions