webview javascript interface function not found

Issue

I am trying to pass json data from a java to my web view this is my code:

interface:

public class ChartsJavaScriptInterface {
public ChartsJavaScriptInterface() {

}

    public String getData(){
        String s = "[ {date: 'A', frequency: .00100, date: '1-May-11', close: 1}," +
                    "{date: 'B', frequency: .01492, date: '2-May-14', close: 2}," +
                    "{date: 'C', frequency: .02782, date: '3-May-14', close: 3}," +
                    "{date: 'D', frequency: .04253, date: '4-May-15', close: 5}," +
                    "{date: 'D', frequency: .04253, date: '5-May-15', close: 4}," +
                    "{date: 'D', frequency: .04253, date: '7-May-15', close: 2},]";


        return s;
    }

}

activity:

    chartsView = (WebView) rootView.findViewById(R.id.charts_chart_view);

    chartsView.addJavascriptInterface(new ChartsJavaScriptInterface(), "chartInterface");
    chartsView.setWebChromeClient(new WebChromeClient());
    chartsView.getSettings().setJavaScriptEnabled(true);
    chartsView.setInitialScale(30);
    chartsView.getSettings().setBuiltInZoomControls(true);
    chartsView.getSettings().setLoadWithOverviewMode(true);
    chartsView.getSettings().setUseWideViewPort(true);
    chartsView.loadUrl("file:///android_asset/line.html");

html file:

....
draw(JSON.parse(chartInterface.getData()));
....

logCat: 08-25 13:34:57.397: E/Web Console(19809): Uncaught TypeError: Object [object Object] has no method 'getData' at file:///android_asset/line.html:345

what's my mistake? help please?

Thanks, Ilan

Solution

I believe you forgot to add the JavascriptInterface annotation:

@JavascriptInterface
public String getData(){
    String s = "[ {date: 'A', frequency: .00100, date: '1-May-11', close: 1}," +
                "{date: 'B', frequency: .01492, date: '2-May-14', close: 2}," +
                "{date: 'C', frequency: .02782, date: '3-May-14', close: 3}," +
                "{date: 'D', frequency: .04253, date: '4-May-15', close: 5}," +
                "{date: 'D', frequency: .04253, date: '5-May-15', close: 4}," +
                "{date: 'D', frequency: .04253, date: '7-May-15', close: 2},]";
    return s;
}

Please take a look here for a reference how to build a bridge between JS and Android

Answered By - nikis