1

I have some difficulties when trying to pass data to my html file. My html file is located at project root inside assets folder. In short, i am displaying my html file inside a webView.

This is portion of my mainActivity.kt, which is used to populate my webView

mWebView = findViewById(R.id.activity_main_webview);
val webSettings = mWebView.settings
webSettings.javaScriptEnabled = true
mWebView.loadUrl("file:///android_asset/googlechart.html");

and here is portion of my googlechart.html, which is stored locally inside assets folder

var dataRow = [["mushroom", 1], ["fish", 3]]
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(dataRow);

I want to pass data from mainActivity.kt to my googlechart.html, per answer at Passing data from java class to Web View html, it didn't explain how to pass data to a html file which is stored inside project root. How can i achieve that ?

Any help or insight is appreciated.

Ya'qub Qamarudin Ad Dibiaza
  • 74
  • 1
  • 11

1 Answers1

3

Simple solution

  1. use Query when loadUrl()
  2. get document.location.href in script
  3. deal with your data
    • decode string, split, etc

example

If data is json

android

val json = JsonObject().apply {
    addProperty("age","28")
    addProperty("name","john")
    addProperty("contents","test")
}
val url = "file:///android_asset/test.html?$json"
binding.webView.loadUrl(url)

local .html

<!DOCTYPE html>
<html>

<body>
    <H1>test</H1>
    <oi id="list">
    </oi>
    <script type="text/javascript">
        function makeList() {
            const getOiTag = document.getElementById("list");

            const decodeUrl = decodeURI(document.location.href);
            const jsonStr = decodeUrl.split("?")[1];
            const json = JSON.parse(jsonStr);

            for(i in json){
                const li = document.createElement("li")
                li.textContent = i + " : " + json[i];
                getOiTag.appendChild(li);
            }
        }
        makeList()

    </script>
</body>

</html>

enter image description here

liveAnyway
  • 629
  • 6
  • 15
  • thank you for the answer, the query used is nice to send a single string data but what if i want to pass a bit complex data, like array or object ? – Ya'qub Qamarudin Ad Dibiaza May 19 '21 at 08:54
  • If I were you, I'll just put any data in query and deal with(decode,...) in `script`. I tested `array` and `object`, It will show well. But just plain `string` is best for this case I think. – liveAnyway May 19 '21 at 09:17
  • could you elaborate it in answer ? it would be very helpful – Ya'qub Qamarudin Ad Dibiaza May 19 '21 at 09:35
  • thank you, but i am still wondering why `val url = "file:///android_asset/test.html?$json"` always return me ERR_FILE_NOT_FOUND when displayed at webView, did yours works fine ? – Ya'qub Qamarudin Ad Dibiaza May 20 '21 at 02:59
  • Is your `.html` file name `test.html`?? not `googlechart .html`? and check your `json` is can be shown in logcat. and I tested `json` work well as shown in screenshot. I used `JsonObject()` from `Gson` – liveAnyway May 20 '21 at 03:19