I can't parse using JSON using Javascript

Question

I have read the post for this an yet I still don't know what is happening.

My var "text" is valid according to most JSON online data checker but when I execute the parse it doesn't do anything.

Here is an example code:

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{
"zipcodes": [
    {
        "zip": "22312",
        "city": "Alexandria",
        "state": "VA"
    },
    {
        "zip": "22030",
        "city": "Fairfax",
        "state": "VA"
    },
    {
        "zip": "22301",
        "city": "Tyson's Corner",
        "state": "VA"
    },
    {
        "zip": "20148",
        "city": "Ashburn",
        "state": "VA"
    }
]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.zipcodes[1].zip + " " + obj.zipcodes[1].city;
</script>

</body>
</html>

You dont have any errors in your console (something like, Uncaught SyntaxError: Unexpected token ILLEGAL...? And why are you trying to manually create a stringy object? Just create the object! — tymeJV
– tymeJV, Commented Mar 11, 2015 at 15:50
Is that "text" variable an example or what? You don't really need to parse a json, as long as you're already writing an object inside that. jsfiddle.net/prssq57w — briosheje
– briosheje, Commented Mar 11, 2015 at 15:52
Don't build json by hand. If you want a test json string, make a javascript object and stringify it. — user400654
– user400654, Commented Mar 11, 2015 at 16:02
just trying it in its string form, later I will have to put the json file in a server and call it. Was just concerned about the fact that the JSON.parse can't read it. It was the un-escaped (') that caused the commotion. UGH — jeffr
– jeffr, Commented Mar 11, 2015 at 16:04

Justin Niessner · Accepted Answer · 2015-03-11 15:56:13Z

You have two issues:

JavaScript doesn't support multi-line strings without marking each line with a continuation (via \ at the end of the line). I've done this in my example but it's really easier to include your JSON on a single line.
You're using single-quotes for your string but your string contains an un-escaped '. Escape it, and you're fine.

var text = '{ \
  "zipcodes": [\
    { \
      "zip": "22312", \
      "city": "Alexandria", \
      "state": "VA" \
    }, \
    { \
      "zip": "22030", \
      "city": "Fairfax", \
      "state": "VA" \
    }, \
    { \
      "zip": "22301", \
      "city": "Tyson\'s Corner", \
      "state": "VA" \
    }, \
    { \
      "zip": "20148", \
      "city": "Ashburn", \
      "state": "VA" \
    } \
  ]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.zipcodes[1].zip + " " + obj.zipcodes[1].city;

<div id='demo'></div>

whoacowboy · Accepted Answer · 2015-03-11 15:52:57Z

2

You have to put the json on one line and escape your '.

"Tyson\'s Corner"

http://jsbin.com/xumiba/1/edit?html,js,console,output

var text = '{ "zipcodes": [ { "zip": "22312", "city": "Alexandria", "state": "VA" }, { "zip": "22030", "city": "Fairfax", "state": "VA" }, { "zip": "22301", "city": "Tyson\'s Corner", "state": "VA" }, { "zip": "20148", "city":"Ashburn", "state": "VA" }]}';

answered Mar 11, 2015 at 15:52

whoacowboy

7,5077 gold badges48 silver badges84 bronze badges

5 Comments

James Montagne Over a year ago

Or leave it on multiple lines and escape the line returns.

peterdotjs Over a year ago

It does not have to be in one line. ES6 supports multi-line template strings - that isn't necessarily an issue.

peterdotjs Over a year ago

@TIMINeutron Just saying its not "you HAVE to". It's you probably SHOULD since ES6 isn't yet supported everywhere but you can still get around that with other libraries "have to"

tfrascaroli Over a year ago

@peterdotjs Sorry, what I really meant is "It's not supported today and it should never ever be supported". That is screaming "go ahead and be a lousy programmer", not really best-practices material.

peterdotjs Over a year ago

@TIMINeutron LOL. Well per the React mindset "Rethinking best practices" :p

Farhan Rahman · Accepted Answer · 2015-03-11 15:58:02Z

0

You need to add \ at the end of every string new line and escape the ' character. Something like this will do:

var text = '{\
"zipcodes": [\
    {\
        "zip": "22312",\
        "city": "Alexandria",\
        "state": "VA"\
    },\
    {\
        "zip": "22030",\
        "city": "Fairfax",\
        "state": "VA"\
    },\
    {\
        "zip": "22301",\
        "city": "Tyson\'s Corner",\
        "state": "VA"\
    },\
    {\
        "zip": "20148",\
        "city": "Ashburn",\
        "state": "VA"\
    }\
]}';

obj = JSON.parse(text);

console.log(obj.zipcodes[1].zip + " " + obj.zipcodes[1].city);
document.getElementById("demo").innerHTML =
obj.zipcodes[1].zip + " " + obj.zipcodes[1].city;

Here is a jsfiddle link:

http://jsfiddle.net/0retway7/

answered Mar 11, 2015 at 15:58

Farhan Rahman

2062 silver badges12 bronze badges

1 Comment

jeffr Over a year ago

This will work but will not be a valid json object later

Collectives™ on Stack Overflow

I can't parse using JSON using Javascript

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related