0

I am making an android application with Kotlin using the framework Ktor where the android device act as the server and you can connect to it using your browsers in other devices. I have been able to get to the spot where my .hbs file (which is the template for creating a html page) displays all data in the browser. When I pass single data like String, Int, Bool from the backend to this .hbs page. But when I try to pass a list or arraylist to the .hbs page and loop through it, I cannot displays the content from the loop.

This is how I set up my templates

fun Application.configureTemplating(){
    install(Mustache){
        mustacheFactory = DefaultMustacheFactory("templates")
    }
}

This is how I set up my routing

fun Application.configureRouting() {
     routing {
        get("/") {
            call.respondRedirect("web")
        }

        route("web") {
            get{
                val directoryFiles = DataManager.getRawData(Const.ROOT_FOLDER_KEY)
                call.respond(MustacheContent("index.hbs", mapOf("directoryFiles" to directoryFiles)))
            }
        }
    }
}

This is my .hbs file

<html>
<head>
</head>
<body>
<h3>Folders</h3>
<div class="container">
    {{#directoryFiles}}
        <p>{{name}}</p>
    {{/directoryFiles}}
</div>
</body>
</html>

My "directoryFiles" prints

[{"extension":"","fileType":"FOLDER","name":"Pictures","path":"\/storage\/emulated\/0\/Pictures","sizeInMB":0.003326416015625,"subFiles":5},{"extension":"","fileType":"FOLDER","name":"Android","path":"\/storage\/emulated\/0\/Android","sizeInMB":0.003326416015625,"subFiles":3}].

when I try to debug it. When I try to display the only the list in the browser it shows

enter image description here

, but I try to loop through it and display it's content, the content doesn't show and it does not display an errors either.

This is my mustache gradle dependency and the ktor version is 2.0.1

    implementation("io.ktor:ktor-server-mustache:$ktor_version")

This is the project hierarchy enter image description here

Ohiorenua
  • 31
  • 5
  • Could you please tell me if you remove the `div` with the class `container` then is the HTML page is rendered? I tried to test your template with the `val directoryFiles = Environment.getExternalStorageDirectory().listFiles()` and it works as expected. – Aleksei Tirman Oct 19 '22 at 08:40
  • How did you loop through the list in your index.hbs and display each content. Mine does not show anything file when I run it in the browser. I removed the div, it still did not work. – Ohiorenua Oct 19 '22 at 12:39
  • Where is your `index.hbs` file stored? – Aleksei Tirman Oct 19 '22 at 14:41

1 Answers1

0

I have found the answer to the question. The bug was because I was using an array of json, instead of using an array of kotlin data class. My list should look like

[FileModel(path=/storage/emulated/0/Pictures, fileType=FOLDER, name=Pictures, sizeInMB=0.003326416015625, extension=, subFiles=5), FileModel(path=/storage/emulated/0/Android, fileType=FOLDER, name=Android, sizeInMB=0.003326416015625, extension=, subFiles=3)]

And the index.hbs should look like this

<html>
<body>
{{#directoryFiles}}
    <h1>File {{name}}</h1>
{{/directoryFiles}}
</body>
</html>
Ohiorenua
  • 31
  • 5