Jquery Parse JSON coming from an html element

Question

I am trying to parse some JSON coming from the server into an object I can use in Javascript. The JSON is saved by the server inside a span. When I click on the action button, it should get the JSON and parse it into an object. Unfortunately, I get an exception. Please see the code:

$(function(){
  $("#btn").click(function(elem){
    var elem = $("#content");
    var html = elem.html();
    console.log(html);
    var x = JSON.parse(html);
    console.log(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="btn">Action</button>
    <br/><br/>
     <span id="content">{"test" : "<a href=\"http://cnn.com\">CNN</a> Hello"}</span>
</body>

I also tried it with the content in the span not escaping the ":

<span id="content">{"test" : "<a href="http://cnn.com">CNN</a> Hello"}</span>

Any idea how to solve?

Note for background: this is used inside an angular app which needs to receive the json to init the model.

Can you include javascript at Question where JSON returned from server is set as html of #content element? — guest271314
– guest271314, Commented Sep 28, 2016 at 17:57
checklist: Is the <a> meant to display visually inside #content, or is #content hidden. This means of transferring JSON data is bound to fail, since the original HTML markup gets parsed into a DOM and discarded. The .html() call is not giving you the original markup. It generates it on the fly. — user1106925
– user1106925, Commented Sep 28, 2016 at 18:11
@checklist "Sorry but I don't understand what you need?" How did you set the html of #content element? Would suggest using .dataset of element or .data() to store the JSON. You are probably losing exact JSON representation by using .innerHTML of element to convert back and forth. — guest271314
– guest271314, Commented Sep 28, 2016 at 18:23
@checklist "I am trying to parse some JSON coming from the server" How do you retrieve JSON from server? Can you include that portion of javascript at Question? — guest271314
– guest271314, Commented Sep 28, 2016 at 18:36

guest271314 · Accepted Answer · 2016-09-28 17:07:31Z

2

You can pass html to JSON.stringify()

$(function(){
  $("#btn").click(function(elem){
    var elem = $("#content");
    var html = elem.html();
    console.log(html);
    var x = JSON.parse(JSON.stringify(html));
    console.log(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="btn">Action</button>
    <br/><br/>
     <span id="content">{"test" : "<a href=\"http://cnn.com\">CNN</a> Hello"}</span>
</body>

answered Sep 28, 2016 at 17:07

guest271314

1

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

40 Comments

user1106925 Over a year ago

Why would they pass a string to JSON.stringify?

Max Koretskyi Over a year ago

@squint, indeed, you're right, I can't access .test as parse returned a string. I never thought parse can return a string :). I guess I need to read more about how stringify and parse works

user1106925 Over a year ago

@guest271314: Oh, I think they're just using the HTML document as a way to transfer the JSON data to the browser. "...The JSON is saved by the server inside a span..." So I think the OP is showing exactly how it gets sent from the server. A data- attribute would be better.

user1106925 Over a year ago

...I think the OP was hoping the .html() would provide the original HTML markup. Lots of people don't realize that the original HTML is gone after it reaches the browser.

user1106925 Over a year ago

I have to go. Best of luck!

|

Max Koretskyi · Accepted Answer · 2016-09-28 17:11:39Z

1

function parse() {
  var span = document.querySelector('span');
  console.log(JSON.parse(span.textContent));
}

<span id="content">{"test" : "&lt;a href=\"http://cnn.com\"&gt;CNN&lt;/a&gt; Hello"}</span>
<button onclick="parse()">parse</button>

The content inside your span

<span id="content">{"test" : "<a href="http://cnn.com">CNN</a> Hello"}</span>

should be escaped

<span id="content">{"test" : "&lt;a href=\"http://cnn.com\"&gt;CNN&lt;/a&gt; Hello"}</span>

edited Sep 28, 2016 at 17:11

answered Sep 28, 2016 at 17:06

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Collectives™ on Stack Overflow

Jquery Parse JSON coming from an html element

2 Answers 2

40 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

40 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related