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
– ADyson, Commented Jun 15, 2018 at 14:03

Gaurav Gandhi · Accepted Answer · 2018-06-15 14:41:48Z

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, 2018 at 14:41

Gaurav Gandhi

3,2112 gold badges30 silver badges40 bronze badges

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

1 Comment

Neli Over a year ago

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.

user3153298 · Accepted Answer · 2018-06-15 14:05:19Z

2

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

Escape them with a backslash like this \"

answered Jun 15, 2018 at 14:05

user3153298

1873 bronze badges

1 Comment

Neli Over a year ago

Silly me, I can do that of course. The answer Gaurav Gandhi gave is slightly more readable. But thank you none the less!

MSH · Accepted Answer · 2018-06-15 14:37:09Z

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, 2018 at 14:37

MSH

1,30514 silver badges34 bronze badges

4 Comments

Neli Over a year ago

Thank you for the answer, it cleared a few things up. The code isn't working 100%, but I get the gist :)

MSH Over a year ago

but it is working , i checked in myself in the console. :)

Neli Over a year ago

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 :)

MSH Over a year ago

may be you need to select , No wrap - bottom of <head>, in JS load type

Collectives™ on Stack Overflow

Passing JSON string to JavaScript

JavaScript Code:

HTML:

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript Code:

HTML:

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related