Passing JSON string to JavaScript

Question

I'm working on a project, and we use a lot of coding languages for different parts.

I've tried to simplify the problem as much as I can, and came up with the following JSfiddle.

The problem is, I have a JSON string which I want to pass on to a JavaScript function. If I call it from JavaScript, it's OK. But when I call it with a onmouseover, HTML throws the error

Uncaught SyntaxError: Invalid or unexpected token

JavaScript Code:

 function test123(obj, e, lookupx){
      console.log(lookupx);
    }

    test123(this, event, '{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}');

HTML:

    <div>
      First check the console, direct calling with js string is ok.<br>
      Then:<br>
      <a href="#" onmouseover="test123(this, event, '{"mt:assetsys:assetuapr": 
                 {"assetmat":"material","assettag":"tag"}}');">hover this
      </a>
      <br>
      And an error occurs
    </div>

Could someone explain what the difference is between the two cases?

The onmouseover vs
The direct calling to the function.

because in the second case the JSON string is wrapped inside double-quotes already (for the onmouseover attribute), so you need to escape the double-quotes in the JSON, otherwise the onmouseover attribute will be malformed - the first time it comes to a double-quote related to the JSON it thinks it's the end of the onmouseover attribute, but it's not. — ADyson, Jun 15 '18 at 14:03

score 3 · Accepted Answer · answered Jun 15 '18 at 14:41

3

I had the same scenario, I ended up using Template literal

Note, you have to use single quotes ' for HTML attribute value.

So your code can be re-written as follows,

<div>
  First check the console, direct calling with js string is ok.<br>
  Then:<br>
  <a href="#" onmouseover='test123(this, event, `{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}`);'>
   hover this
  </a><br>
  And an error occurs
</div>

Link to jsFiddle

answered Jun 15 '18 at 14:41

Gaurav Gandhi

3,041
2
27
40

1

This works perfectly, thank you! In my honest opinion, the readability of this answer is much better than when you escape them (like in the other answers). Ty for the link to template literal. – Neli Jun 16 '18 at 08:55

score 2 · Answer 2 · answered Jun 15 '18 at 14:05

2

You have to escape all the quotes inside the onmousover=""

Escape them with a backslash like this \"

answered Jun 15 '18 at 14:05

user3153298

187
3

Silly me, I can do that of course. The answer Gaurav Gandhi gave is slightly more readable. But thank you none the less! – Neli Jun 16 '18 at 08:50

score 1 · Answer 3 · answered Jun 15 '18 at 14:37

1

You are not escaping the character, also you need to make some adjustment like I did for your Updated JSFiddle

Check it , it works fine

HTML

<div>
  First check the console, direct calling with js string is ok.<br>
  Then:<br>
  <a href="#" onmouseover='test123(this, event, "{\"mt:assetsys:assetuapr\":{\"assetmat\":\"material\",\"assettag\":\"tag\"}}")'>
   hover this
  </a><br>
  And an error occurs
</div>

JS

function test123(obj, e, lookupx){
 console.log(lookupx);
}

test123(this, event, '{"mt:assetsys:assetuapr":{"assetmat":"material","assettag":"tag"}}');

Hope it helps!!

answered Jun 15 '18 at 14:37

Mandeep Singh

1,287
14
34

Thank you for the answer, it cleared a few things up. The code isn't working 100%, but I get the gist :) – Neli Jun 16 '18 at 08:49
but it is working , i checked in myself in the console. :) – Mandeep Singh Jun 18 '18 at 07:53
Well, I'll be... I'm sorry, your JSFiddle works indeed. Yet when I copy and paste the code given in your 2 blocks (HTML and JS) and paste it in JSFiddle myself, it returns: 'Uncaught ReferenceError: test123 is not defined'. But I can't, for the life of me, spot the difference.. Strange, but nevertheless, thank you :) – Neli Jun 19 '18 at 09:44
may be you need to select , No wrap - bottom of , in JS load type – Mandeep Singh Jun 20 '18 at 11:37

Passing JSON string to JavaScript

JavaScript Code:

HTML:

3 Answers3