JS - Parsing JSON with html

Question

I have data in this format:

var data = "{"attr":"value","html":"<div><div style="left: 0px;"></div></div>"}";

There is more to the html, but its not required here. I try to do:

data = JSON.parse(data)

This errors giving:

Uncaught SyntaxError: Unexpected token l

Due to the additional " in the style. How do you correctly parse this?

edit:

I am getting data from a server, so I receive it in a websocket such as:

sock.onmessage = function(message) {
    //Need to parse this.
    data = message.data

    console.log(typeof data); // = string
    console.log(data);
    //console.log(data) result        
    //{"attr":"value","html":"<div><div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;">Content</div></div>"}
}

This value is not correct. "<div><div style="left: 0px;"></div></div>" — Zohaib Ijaz
– Zohaib Ijaz, Commented Nov 20, 2016 at 23:39
encode html or use single quotes to wrap ur html content ( '<div><div style="left: 0px;"></div></div>') — surya singh
– surya singh, Commented Nov 20, 2016 at 23:39
You're assigning an invalid JSON string to a variable then parsing it. Is that really in your code? I think we might need to know what you're trying to do here. — Jim B.
– Jim B., Commented Nov 20, 2016 at 23:39
This data is being sent from a server, as in I just get data. How to do this in that case? — shell
– shell, Commented Nov 20, 2016 at 23:40
The issue here isn't with JSON, it's with your string literal in your code. Show us what you're really doing in your code. — Brad
– Brad, Commented Nov 20, 2016 at 23:44

Brad · Accepted Answer · 2016-11-21 00:04:18Z

1

There are two problems here that are very similar. The first is with the way you simplified the example in your question.

var data = "{"attr":"value","html":"<div><div style="left: 0px;"></div></div>"}";

This isn't valid JavaScript. The easiest fix is to use single quotes around the whole thing. You can also escape quotes with a backslash \. Try this instead:

var data = '{"attr":"value","html":"<div><div style="left: 0px;"></div></div>"}';

Now the second problem you have is that this JSON is totally invalid and ambiguous. The reason is that quotes aren't escaped correctly in the html portion. There really isn't much you can do about this unless you know that this format will never change. In that case, you could write your own hackjob pseudo-JSON parser. Don't do that.

You need to go talk to the person providing you the junk data. How is your code supposed to know whether or not the html variable value is complete, or if it's just a quote in the HTML? Whomever set this JSON data up needs to fix it.

answered Nov 21, 2016 at 0:04

Brad

164k57 gold badges380 silver badges559 bronze badges

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

2 Comments

shell Over a year ago

Thanks, will reach out to the provider.

Brad Over a year ago

@shell Best of luck. :-) I might also add that if they're giving you garbage data, I'd strongly question any other of their technical abilities. Be on the lookout for other hacky stuff.

bob-fornal · Accepted Answer · 2016-11-20 23:47:18Z

0

It's the continued use of double-quotes, should be something like

var data = "{
  \"attr\":\"value\",
  \"html\":\"<div><div style='left: 0px;'></div></div>\"
}";

It would be more properly, as a string:

var data = "{\"attr\":\"value\",\"html\":\"<div><div style='left: 0px;'></div></div>\"}";

... for a clean JSON.parse(data);

The issue is with the string, not the parsing process. I always prefer the \" formatting and then single quotes for internals such as the style. It has always worked well for me.

edited Nov 20, 2016 at 23:47

answered Nov 20, 2016 at 23:41

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

4 Comments

shell Over a year ago

Yes that is correct, but I do not create the data object. I should have said that in the beginning. Sorry. See edit.

Brad Over a year ago

There's no reason to replace the quotes for the HTML attribute. The double quote " can be double-escaped to pass through both contexts.

bob-fornal Over a year ago

Can the inputted format be adjusted (better changed before you get it, you could replace quotes with slash-quotes.

bob-fornal Over a year ago

@Brad, the reason I use the single quotes was more for visual consistency ... making it easier to identify the interior quoting, rather than functionality.

Farzad Salimi Jazi · Accepted Answer · 2016-11-20 23:57:42Z

0

Use ' instead of " like this:

str = '<div><div style="left: 0px;"></div></div>'
var data = "{'attr':'value','html': "+JSON.stringify(str)+"}";

Update

edited Nov 20, 2016 at 23:57

answered Nov 20, 2016 at 23:40

Farzad Salimi Jazi

76010 silver badges26 bronze badges

2 Comments

Brad Over a year ago

This is an object literal... no longer a string literal. The data is coming from a server, so it needs to be parsed yet.

shell Over a year ago

Yes some strategy like this will work. But you'd have to do string splits on the html portion of the string, parse that portion, and then rejoin it. Thanks for the approach, but I am just going to contact the provider.

Collectives™ on Stack Overflow

JS - Parsing JSON with html

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related