How do I call an API in an ELM app, my code won't handle the response data? - elm

Question

New to Elm can anyone help me understand why this code returns my error "could not load the page"? I am pretty sure it has something to do with the data being returned being JSON and I have not yet figured out how to manage that.
Basically i am new to Elm and want to take it a little further by working with more JSON data from free APIs can anyone lend a hand?
import Browser
import Html exposing (Html, text, pre)
import Http
-- MAIN
main =
Browser.element
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
}
-- MODEL
type Model
= Failure
| Loading
| Success String
init : () -> (Model, Cmd Msg)
init _ =
( Loading
, Http.get
{ url = "http://api.openweathermap.org/data/2.5/weather?q=naples&APPID=mykey"
, expect = Http.expectString GotText
}
)
-- UPDATE
type Msg
= GotText (Result Http.Error String)
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
GotText result ->
case result of
Ok fullText ->
(Success fullText, Cmd.none)
Err _ ->
(Failure, Cmd.none)
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- VIEW
view : Model -> Html Msg
view model =
case model of
Failure ->
text "I was unable to load your book."
Loading ->
text "Loading..."
Success fullText ->
pre [] [ text fullText ]
UPDATE -
This works in Ellie but not locally compiling using Elm 19
Something is off with the body of the `init` definition:
39|> ( Loading
40|> , Http.get
41|> { url = "http://127.0.0.1:8080/test"
42|> , expect = Http.expectString GotText
43|> }
44|> )
The body is a tuple of type:
( Model, Json.Decode.Decoder a -> Http.Request a )
But the type annotation on `init` says it should be:
( Model, Cmd Msg )
-- TYPE MISMATCH ---------------------------------------------- src/Fizzbuzz.elm
The 1st argument to `get` is not what I expect:
40| , Http.get
41|> { url = "http://127.0.0.1:8080/test"
42|> , expect = Http.expectString GotText
43|> }
This argument is a record of type:
{ expect : b, url : String }
But `get` needs the 1st argument to be:
String
-- TOO MANY ARGS ---------------------------------------------- src/Fizzbuzz.elm
The `expectString` value is not a function, but it was given 1 argument.
42| , expect = Http.expectString GotText
^^^^^^^^^^^^^^^^^
Are there any missing commas? Or missing parentheses?
UPDATED - I made a change to try sending any JSON to Elm from my Go webserver to confirm some things leaned by your answers thanks.

Answer 1

You are trying to make a cross-domain request. The mechanism for doing this is called CORS (Cross-Origin Resource Sharing). To enable CORS requests, the server must explicitly allow requests from your domain using the access-control-allow-origin response header. The open weather API does not have this header, so when the browser tries to request the data it is blocked by browser security restrictions.
You'll need to do one of the following:
ask openweather to whitelist your domain for CORS response headers (unlikely to be possible)
proxy the openweather request from your own domain's servers
The latter is more likely to be possible, but it also means you'll be able to keep your API key a secret. If you are making weather requests from the client then anyone that loads your web page will be able to see the API key on the requests their browser makes as well as in the source code of your webpage.
The working example given by #5ndG uses an API that has an access-control-allow-origin response header that explicitly whitelists Ellie, which is why it works there. You can look at the requests and responses using your browser's dev tools to see that this is the case.
good luck!

Answer 2

Your code should manage fine with a JSON response. It will just give you a JSON string. (Though probably you will want to decode your JSON so you can use it.)
I tried your code with a testing API I found on Google that returns some JSON: https://jsonplaceholder.typicode.com/todos/1
It works fine, displaying the JSON string as expected, so perhaps your url has something wrong with it?
See this Ellie for the working example.
It might also be a good idea to not throw away the Http error in your update function; it provides useful information when debugging.