Android Javascript HTML showing package name as value

Question

I am new in java and javascript programming. Currently I am doing an app to get all mp3 in phone storage and also sd card and pass it to @javascriptinterface then to javascript in html file. When the result show at html, it shows the package file name. e.g. com.xxx.xxx.xxx@12345.

Need to get mp3 name show at html.

Any advice would be appreciated. Thank you.

Here is my code for the activity:

public ArrayList<AudioModel> getAllAudioFromDevice (final Context context){
    final ArrayList<AudioModel> tempAudioList = new ArrayList<>();


    Uri uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI; // retrieve song info
    String[] projection = {
            MediaStore.Audio.AudioColumns.DATA,
            MediaStore.Audio.AudioColumns.TITLE,
            MediaStore.Audio.AudioColumns.ALBUM,
            MediaStore.Audio.ArtistColumns.ARTIST,
            MediaStore.Audio.AudioColumns.DURATION,
    };
    Cursor c = context.getContentResolver().query(uri, // Find from the database according to Uri
            projection, null, null, null);

    if (c != null) {
        while (c.moveToNext()) {
            AudioModel audioModel = new AudioModel();
            String path = c.getString(0); // Retrieve path.
            String name = c.getString(1); // Retrieve name.
            String album = c.getString(2); // Retrieve album name.
            String artist = c.getString(3); // Retrieve artist name.
            String duration = c.getString(4);

            audioModel.setaName(name);
            audioModel.setaAlbum(album);
            audioModel.setaArtist(artist);
            audioModel.setaPath(path);
            audioModel.setaDuration(duration);

            Log.e("Name :" + name, " Album :" + duration);
            Log.e("Path :" + path, " Artist :" + artist);


            tempAudioList.add(audioModel);

        }
        c.close();
    }

    return tempAudioList; // stop getAllAudioFromDevice method

}
public class JavaScriptInterface {

    private Activity activity;

    Context mContext;

    public void JavaScriptInterface(Context c) {
        mContext = c;
    }

    public JavaScriptInterface(Activity activity) {
        this.activity = activity;
    }


    @JavascriptInterface
    public String getmp3all() {

        getAllAudioFromDevice(MyActivity.this).toString();

    }

}

Below is the html file:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table>
<tr>
    <td>
        <div id="divMp3"></div>

    </td>
</tr>

</table>



<script type="text/javascript">

function showMP3(){
    var arraymp3 = AndroidFunction.getmp3all();
    document.getElementById('divMp3').innerHTML = arraymp3;

}
window.onLoad = showMP3();

</script>


</body>
</html>

Update: Manage to solve the issue above.

@JavascriptInterface
public String getmp3all() {


        ArrayList<AudioModel> allMp3 = getAllAudioFromDevice(this.activity);
        List<AudioModel> listStrings = new ArrayList<>(allMp3);

        String temp= "";

        for (int i = 0; i < listStrings.size(); i++) {
            temp += listStrings.get(i).aName+",";
        }

        return temp;

    }

HTML file:

<table>
    <tbody>
    <tr>
    <script>
        function showMP3(){
            var stringmp3 = AndroidFunction.getmp3all();
            var arraymp3= stringmp3.split(",");

            for(var i = 0; i < arraymp3.length; i++)
            {
                document.write("<tr>");
                document.write("<td>"+ arraymp3[i] +"</td>");
                document.write("</tr>");

                console.log(arraymp3[i]);
            }

        }

        window.onLoad = showMP3();
    </script>
    </tr>
    </tbody>
 </table>

Hi Josephcvh and welcome to Stack Overflow! Please can you be a little more clear on what the problem is ? — user230910, Mar 06 '19 at 04:23
hi user230910, the problem when i run this app, the result shows "com.test.admin.testinghtml.AudioModel@12345678" instead of mp3 file details. — josephcvh, Mar 06 '19 at 05:30

Stanley Ko · Answer 1 · 2019-03-06T05:51:56.183

0

Welcome to stackoverflow.

First, you need to set javascript interface to your webview.

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

Next, call that interface from javascript code.

function showMP3(){
    var arraymp3 = window.JSInterface.getmp3all();
    document.getElementById('divMp3').innerHTML = arraymp3;
}

Please refer to: Call Java function from JavaScript over Android WebView

Update:

Your getmp3all() method returns nothing. The printed strange number is memory address, that means you are returning "Class" or "Method", not a value.

@JavascriptInterface
public String getmp3all() {

    // Is this code compilable? 
    // getAllAudioFromDevice(MyActivity.this).toString();
    return getAllAudioFromDevice(MyActivity.this).toString();
}

edited Mar 06 '19 at 05:51

answered Mar 06 '19 at 04:27

Stanley Ko

3,383
3
34
60

already included in my onCreate: myWebView.getSettings().setJavaScriptEnabled(true); myWebView.addJavascriptInterface( new JavaScriptInterface(this), "AndroidFunction"); myWebView.loadUrl("file:///android_asset/www/index.html"); – josephcvh Mar 06 '19 at 05:27
@josephcvh Then, change AndroidFunction.getmp3all(); to window.AndroidFunction.getmp3all(); – Stanley Ko Mar 06 '19 at 05:29
Tried, same result. It shows com.test.admin.testinghtml.AudioModel@12345678, com.test.admin.testinghtml.AudioModel@23456789, com.test.admin.testinghtml.AudioModel@12312456 – josephcvh Mar 06 '19 at 05:42
I see, sorry please bear with me, as i am very new with android and java. So to say, I will need to pass value inside of getAllAudioFromDevice method to the getmp3all() method? – josephcvh Mar 06 '19 at 06:03

Android Javascript HTML showing package name as value

1 Answers1