How would I go about loading a static json file us...

# kobweb

[Christiano]

How would I go about loading a static json file using Kobweb?
I noticed some ways to achieve this with Javascript, but none of those option seems to be available with this framework 😅

[David Herman]

Load from where? From disk? Or hosted on a server?

[Christiano]

First thought was to load it from the public folder.
Wanted to make a couple of things work with a static file since I don't have a backend for my project yet 😅

[David Herman]

This is a rough snippet of code extracted from something I once wrote to load a yaml file hosted on the server:

LaunchedEffect(Unit) {
   window.fetch("gamedata.yaml").then { response ->
      response.text().then { responseText ->
         startupState = GameStartupState.LoggingIn(GameData.decodeFromString(responseText))
      }
   }
}

[David Herman]

Files in your public folder end up on a server no matter what

[David Herman]

If you generate your own backend, then of course the kobweb server you run will serve it. But if you export to a static layout and use a static hosting provider, they will serve the file.

[David Herman]

I used window.fetch from the Kotlin/JS standard library in my code above, but I have since added some utility methods to Kobweb. Kobweb now has a window.fetch addition that uses a suspend fun signature. Also, there's now window.http.get(...) you can use as well to fetch a file.

[Christiano]

Wow... I was not aware that the function "fetch" was located under the window 😅

Yeah I thought so, hence the use of the LaunchedEffect and suspend functions xD

Ooh cool, nice of the additions, I'll make sure to check this out!

[David Herman]

You bet! I added some stuff for saving files to disk / loading from disk as well, in case it's useful.

[David Herman]

https://github.com/varabyte/kobweb/blob/main/frontend/compose-html-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/file/FileUtils.kt

https://github.com/varabyte/kobweb/blob/main/frontend/compose-html-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/http/Fetch.kt

https://github.com/varabyte/kobweb/blob/main/frontend/compose-html-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/http/HttpFetcher.kt

[David Herman]

Gotta run for a bit, but I'm guessing now you've got what you need!

[Christiano]

Ooh nice additions!
Damn, there is much more to uncover than I was aware of 😮

Yeah, normally I can continue with what I wanted to do, thank you for the quick response!

[Christiano]

Hmm, loading in the json file works (see image), but for some reason the parsing is giving me issues.

I'm loading the file like this

window.fetch("works.json").then { response ->
    response.text().then { responseText ->
        val someWorks = JSON.parse<Project>(responseText)
        
        val some = someWorks.title
        println(some)
    }
}

My Project class is simply this

data class Project(
    val id: String,
    val title: String
}

And the actual json is this

{
  "id": "1",
  "title": "Android Core"
}

And then I get this error in the frontend console 🤔

Uncaught (in promise) TypeError: someWorks.get_title_iz32un_k$ is not a function
    at PortfolioContent$composable$slambda$lambda$lambda (PortfolioSection.kt:70:38)

Am I missing something? Do I need to add some @Serializer to my data class or is that not necessary? 😅

[Christiano]

Aha, I noticed that in the Todo example the serialization is indeed being used. Trying out that, so probably it will be fixed by using that 😅

Update: Yes, by using kotlinx.serialization I got it working just like I needed it to 😊

[David Herman]

Perfect!

JavaScript has a standard method for parsing json into a dynamic type (https://www.udacity.com/blog/2021/02/javascript-json-parse.html) but using kotlinx serialization for type safe data object generation is the way to go

[Ayfri]

Yes, maybe with @JsExport you can get something working, but I already tried and it wasn't successful, maybe you should try creating a YouTrack ticket 🤔