How to configure Json response in sub web part

Question

I start with Suave and F #. I am trying to pass a serialized json object in my web part to get it in my answer.

In php, I have this

<?php header('Access-Control-Allow-Credentials:true'); header('Access-Control-Allow-Headers:Content-Type, Accept'); header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS'); header('Access-Control-Allow-Origin:*'); ?> { "player1Key":"hdegftzj25", "gameKey":"aegfhzkfszl74852" } 

and with this I get my json object, then I tried to do the same with Suave and Newtonsoft.Json

 type gameCreate= { player1Key : string gameKey: string } let create= { player1Key = "BadBoys2"; gameKey = "zLUGgtrht4456" } let json = Newtonsoft.Json.JsonConvert.SerializeObject(create) //OK (acc |> Json.serialize |> Json.format ) let php = request (fun r -> match r.queryParam "playerName" with | Choice1Of2 name -> OK (movies |> Json.serialize(json) |> Json.format(json)) //|> Response.response(Json.toJson(info)) //|> OK | Choice2Of2 msg -> BAD_REQUEST msg) let webPart = choose [ path "/" >=> (OK "Home") path "/elm/api/create.php" >=> php ] startWebServer defaultConfig webPart 

So, I can create and serialize a json object, but I don’t know how to pass it as an HTTP response in my web part, and with the above code, I keep getting an error in my expression type in my let php

Answer 1

It looks like you have entered too many Json serialization libraries - you seem to mix the Json.NET and Chiron bits (which are used in the tutorial), which doesn't have much effect ...

Let's take a step back. Suave comes with its own Json serialization module, so you can get something by working with just that. Here's what it would look like:

 let php = request (fun r -> match r.queryParam "playerName" with | Choice1Of2 name -> let json : string = create // this comes from Suave.Json, gives you a byte array |> Json.toJson // converts the byte array into a string |> System.Text.Encoding.UTF8.GetString OK json | Choice2Of2 msg -> BAD_REQUEST msg) 

Now, if you want, you can replace the Json.toJson call Json.toJson either the Newtonsoft Json.NET implementation or Chiron (but hopefully not with a mixture of the two). As long as the types are aligned, you should be fine.

For Chiron in particular, you are missing the static ToJson member for the type you want to serialize (this is what your tutorial mentions). Json.NET has a generic serialization function that creates json that matches the writing scheme, so it’s a bit easier to use out of the box, but it also requires more work to adjust the output if necessary.

Answer 2

If you want to return an HTTP 200 response using JSON and set the HTTP headers in Suave, you can use the Writers.setHeader function:

 Writers.setHeader "Access-Control-Allow-Credentials" "true" >=> Writers.setHeader "Access-Control-Allow-Headers:Content-Type" "Accept" >=> Writers.setHeader "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS" >=> Writers.setHeader "Access-Control-Allow-Origin" "" >=> Successful.OK (movies |> Json.serialize |> Json.format) 

All of this is an expression that creates a WebPart , which you can then compose with other web parts using the functions provided by Suave. Therefore, if you want to map the template before setting the headers, you should use something like:

 let php = request (fun r -> match r.queryParam "playerName" with | Choice1Of2 name -> Writers.setHeader "Access-Control-Allow-Credentials" "true" >=> Writers.setHeader "Access-Control-Allow-Headers:Content-Type" "Accept" >=> Writers.setHeader "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS" >=> Writers.setHeader "Access-Control-Allow-Origin" "" >=> Successful.OK (movies |> Json.serialize |> Json.format) | Choice2Of2 msg -> BAD_REQUEST msg) 

As you set the CORS headers, this snippet can also help .