Working with JSON is almost inevitable regardless of the environment. In this post, we will go through different ways of serializing\/deserializing (or encoding\/decoding as some may call it) objects from\/to JSON in Scala.js. As of the date this post is written, there are three main tools that convert objects to\/from JSON:<\/p>\n
We will use the following object for all the examples for uPickle and Circe:<\/p>\n
case class Car(id: String, brand: String, model: String) {}<\/pre>\nusing scalajs-dom requires a slight modification to the object as only js.Object<\/code> is allowed<\/p>\nclass Car extends js.Object {\r\n var id: String = _\r\n var brand: String = _\r\n var model: String = _\r\n}<\/pre>\nSerializing<\/h2>\n\n- uPickle:<\/li>\n<\/ul>\n
Using uPickle, it is enough to create an object that configures the types to be read\/written :<\/p>\n
import upickle.default.{ReadWriter => RW, macroRW}\r\n\r\nobject Car{\r\n implicit def rw: RW[Car] = macroRW\r\n}<\/pre>\nand then:<\/p>\n
val mercedes = new Car(\"1\", \"Mercedes\", \"2015\")\r\n \r\n val mercedesJSON = write[Car](mercedes)\r\n\r\n println(mercedesJSON)\r\n\r\n \/\/result: {\"id\":\"1\",\"brand\":\"Mercedes\",\"model\":\"2015\"}<\/pre>\n\n- Circe:<\/li>\n<\/ul>\n
Circe requires the configuration of encoders\/decoders:<\/p>\n
import io.circe.{Decoder, Encoder}\r\nimport io.circe.generic.semiauto._\r\n\r\nobject Expense {\r\n implicit val carDecoder: Decoder[Car] = deriveDecoder\r\n implicit val carEncoder: Encoder[Car] = deriveEncoder\r\n}<\/pre>\nand then:<\/p>\n
import io.circe.syntax._\r\n\r\n val mercedes = new Car(\"1\", \"Mercedes\", \"2015\")\r\n\r\n val mercedesJSON = mercedes.asJson\r\n\r\n println(mercedes.asJson)\r\n \r\n \/\/result is indented by default �� for making the output oneline : .asJson.noSpaces\r\n \/* {\r\n \"id\": \"1\",\r\n \"brand\": \"Mercedes\",\r\n \"model\": \"2015\"\r\n }\r\n *\/<\/pre>\n\n- scalajs-dom:<\/li>\n<\/ul>\n
using scalajs-dom<\/code> requires the addition of scalacOptions += \"-P:scalajs:sjsDefinedByDefault\"<\/code> to the build file, since @ScalaJSDefined<\/code> is meant to be deprecated.<\/p>\nand then :<\/p>\n
val mercedes = new Car()\r\n mercedes.id = \"10\"\r\n mercedes.model = \"1980\"\r\n mercedes.brand = \"Mercedes\"\r\n println(JSON.stringify(mercedes))\r\n\r\n \/\/result: {\"id\":\"10\",\"brand\":\"Mercedes\",\"model\":\"1980\"}<\/pre>\nDeserializing<\/h2>\n\n- uPickle:<\/li>\n<\/ul>\n
val mercedesJSON = \"\"\"{\"id\":\"10\",\"brand\":\"Mercedes\",\"model\":\"1980\"}\"\"\"\r\n val mercedes = read[Car](mercedesJSON)\r\n println(mercedes.id)\r\n \/\/ 10\r\n println(mercedes.model)\r\n \/\/ 1980\r\n println(mercedes.brand)\r\n \/\/ Mercedes<\/pre>\n\n- Circe:<\/li>\n<\/ul>\n
val mercedesJSON = \"\"\"{\"id\":\"10\",\"brand\":\"Mercedes\",\"model\":\"1980\"}\"\"\"\r\n val mercedes = decode[Car](mercedesJSON).toTry.get\r\n println(mercedes.id)\r\n \/\/ 10\r\n println(mercedes.model)\r\n \/\/ 1980\r\n println(mercedes.brand)\r\n \/\/ Mercedes<\/pre>\n\n- scalajs-dom:<\/li>\n<\/ul>\n
val mercedesJSON = \"\"\"{\"id\":\"10\",\"brand\":\"Mercedes\",\"model\":\"1980\"}\"\"\"\r\n val mercedes = JSON.parse(mercedesJSON).asInstanceOf[Car]\r\n println(mercedes.id)\r\n \/\/ 10\r\n println(mercedes.model)\r\n \/\/ 1980\r\n println(mercedes.brand)\r\n \/\/ Mercedes<\/pre>\nWrap up<\/h2>\n
We have walked through different libraries that allow serializing\/deserializing JSON in Scala.Js. All the methods work in pretty much the same way, so there is no preferred way. The choice is left to the developer.<\/p>\n
\n