1

I'm trying to send JSON data from html to javascript function.

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />"
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel=\"stylesheet\" href=\"roboto.css\">
    <link rel=\"stylesheet\" href=\"webViewLightTheme.css\">
</head>
<body>
    <img src=\"http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg\" onClick=\"window.JavaScriptInterface.showImages( \"[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]\" );\" />"
</body>
</html>

But on image click I'm getting this Uncaught SyntaxError: Invalid or unexpected token

I want to know how to send JSON data from html part to javascript part.

Improve this question
1
  • "from html function to javascript function"?? HTML does not have functions. Commented Feb 16, 2018 at 7:16

4 Answers 4

Reset to default
1

Below is a working sample.

function process(json) {
  // Do whatever you want with the json object
  // Example
  console.log(json[0].name);
}
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />"
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel=\"stylesheet\" href=\"roboto.css\">
    <link rel=\"stylesheet\" href=\"webViewLightTheme.css\">
</head>
<body>
    <img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg" onClick="process([{'name':'John', 'age': '30', 'city':'New York'}]);" />"
</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try the JSON library 

const img = document.getElementById('img');
img.addEventListener('click', function() {
  let jsonString = '"[{"name":"John","age":30,"city":"New York"}]';
  window.JavaScriptInterface.showImages(JSON.parse(jsonString));
});
Improve this answer

Comments

0

unrecommended:

console.log('onclick= '+document.images[0].getAttribute('onclick'));
window.JavaScriptInterface={}
window.JavaScriptInterface.showImages=function(x){console.log(x)}
document.images[0].click()
<img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg\" onclick='window.JavaScriptInterface.showImages("[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]")'>

better use addEventListener like @Reijo did,

Improve this answer

6 Comments

<img class="alignnone size-full wp-image-520" src="http://x.x.x.x/wp-content/uploads/2017/12/facebook-messenger.jpg" alt="" width="750" height="374" onerror='this.onerror=null;this.src='file:///android_res/drawable/image_background.png';' onClick='window.JavaScriptInterface.showImages("[{"image":"http://x.x.x.x/wp-content/uploads/2017/12/facebook-messenger.jpg","imageCaption":""}]");' /> by doing this I got this error "Uncaught SyntaxError: missing ) after argument list", source: file:///android_asset/
@KapilJindal,try this: <img class="alignnone size-full wp-image-520" src="x.x.x.x/wp-content/uploads/2017/12/facebook-messenger.jpg" alt="" width="750" height="374" onerror='this.onerror=null;this.src="file:///android_res/drawable/image_background.png";' onClick='window.JavaScriptInterface.showImages("[{"image":"x.x.x.x/wp-content/uploads/2017/12/…:""}]");' />
<img src="android-smart-text-selection-350x175.jpg" onClick='window.JavaScriptInterface.showImages("[{"name":"John","age":30,"city":"New York"}]");' /> gives this error : Uncaught SyntaxError: missing ) after argument list", source: file:///android_asset/
@KapilJindal,try this: <img src="android-smart-text-selection-350x175.jpg" onclick='window.JavaScriptInterface.showImages("[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]");' />
But I'm getting [{"name":"John","age":30,"city":"New York"}] by converting JSON to string using JSON.stringify(data) so how could I generate like [{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}] mentioned?
|
0

The double quotes in the JSON data are interfering with the sticks quotes for the attributes. You need to escape the divide quotes in the JSON data again (add a \) so that both the enclosing quite we aren't seeing and the HTML parser know that the double quotes in the JSON data are part of the data you're passing in, and not meant to end a quote.

EDIT: Alternatively you could use single quotes, the way you do in the viewport tag, because neither HTML nor Javascript differentiate between single and double quotes. This might make the whole thing less confusing and easier to read.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.