https://kotlinlang.org logo
#kobweb
Title
# kobweb
c

Christiano

11/21/2023, 6:54 PM
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 😅
d

David Herman

11/21/2023, 6:55 PM
Load from where? From disk? Or hosted on a server?
c

Christiano

11/21/2023, 6:57 PM
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 😅
d

David Herman

11/21/2023, 6:58 PM
This is a rough snippet of code extracted from something I once wrote to load a
yaml
file hosted on the server:
Copy code
LaunchedEffect(Unit) {
   window.fetch("gamedata.yaml").then { response ->
      response.text().then { responseText ->
         startupState = GameStartupState.LoggingIn(GameData.decodeFromString(responseText))
      }
   }
}
Files in your public folder end up on a server no matter what
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.
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.
c

Christiano

11/21/2023, 7:01 PM
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!
d

David Herman

11/21/2023, 7:02 PM
You bet! I added some stuff for saving files to disk / loading from disk as well, in case it's useful.
Gotta run for a bit, but I'm guessing now you've got what you need!
c

Christiano

11/21/2023, 7:05 PM
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!
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
Copy code
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
Copy code
data class Project(
    val id: String,
    val title: String
}
And the actual json is this
Copy code
{
  "id": "1",
  "title": "Android Core"
}
And then I get this error in the frontend console 🤔
Copy code
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? 😅
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 😊
👍 1
👏 1
d

David Herman

11/21/2023, 9:28 PM
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
a

Ayfri

11/21/2023, 11:12 PM
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 🤔
4 Views