json objects javascript confusion

Question

I have no idea why this isn't displaying anything. I am trying to get the information in the var txt to generate dynamically in the html!

function byId (id) {
    return document.getElementById(id);
}

var txt = '{"characters":[' +
'{"fullName":"John Doe","speci":"human male","occup":"Web Personality","cide":"Sleeper","descr":"blah","biog":"blarg","allia":"chaos good" },' +
'{"fullName":"Jane Doe","speci":human female",occup":"Movie Producer","cide":"Citric","descr":"bluh","biog":"blurg","allia":"neutral" },' +
'{"fullName":"Canter Doma","speci":alien male",occup":"Chef","cide":"Galv","descr":"bleh","biog":"blerg","allia":"evil" }]}';

var obj = eval ("(" + txt + ")");

byId("fname").innerHTML = obj.characters[1].fullName;
byId("spec").innerHTML = obj.characters[1].speci;
byId("occu").innerHTML = obj.characters[1].occup;
byId("cid").innerHTML = obj.characters[1].cide;
byId("desc").innerHTML = obj.characters[1].descr;
byId("bio").innerHTML = obj.characters[1].biog;
byId("alli").innerHTML = obj.characters[1].allia;

I have a test link here. http://jsfiddle.net/KLer3/

Did you check for syntax errors? Try running through http://jsonlint.com/ and using `JSON.parse()` — megawac, Jan 09 '14 at 16:33
http://jsfiddle.net/KLer3/2/ I fixed the syntax errors and it's still not working — riotgear, Jan 09 '14 at 16:37
JavaScript strings can't span multiple lines. Make sure to check your JS console for errors. — gen_Eric, Jan 09 '14 at 16:40
Why are you trying to create JSON by hand, when there are perfectly fine functions to do this for you? — Barmar, Jan 09 '14 at 16:42
And there are also JSON parsing functions, why resort to `eval`? — Barmar, Jan 09 '14 at 16:43
In your example link in the question (http://jsfiddle.net/KLer3/), you are missing some `"` in your JSON. — gen_Eric, Jan 09 '14 at 16:43
Thank you it was a spacing issue. Would you know a better way to write this as I am going to have 100s of characters http://jsfiddle.net/KLer3/8/ — riotgear, Jan 09 '14 at 16:46

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

Multiple issues:

Your JSON is not correctly formatted. Use http://jsonlint.com/ to verify syntax.
JavaScript strings cannot span multiple lines.
Use JSON.parse instead of eval. See this.

Updated fiddle: http://jsfiddle.net/KLer3/4/

edited May 23 '17 at 11:49

Community

1
1

answered Jan 09 '14 at 16:45

Saravana

37,852
18
100
108

score 1 · Accepted Answer · answered Jan 09 '14 at 16:46

1

This might be better if you weren't using eval.

You were missing quotes in occup and alien.

{
"characters":[
  {
     "fullName":"John Doe",
     "speci":"human male",
     "occup":"Web Personality",
     "cide":"Sleeper",
     "descr":"blah",
     "biog":"blarg",
     "allia":"chaos good"
  },
  {
     "fullName":"Jane Doe",
     "speci":"human female",
     occup":"Movie Producer",
     "cide":"Citric",
     "descr":"bluh",
     "biog":"blurg",
     "allia":"neutral"
  },
  {
     "fullName":"Canter Doma",
     "speci": "alien male",
     "occup":"Chef",
     "cide":"Galv",
     "descr":"bleh",
     "biog":"blerg",
     "allia":"evil"
  }
]}

answered Jan 09 '14 at 16:46

Michael Benin

4,317
2
23
15

Hmmm this is all very helpful. I do know really know best practices. I just find a sample online and run with it. Last 2 things Im trying to escape out to add an image into my array but it is breaking the array also. How do I write this so that it spits out all of the characters onto the page at once. I am learning and I do not know what to call everything just yet. http://jsfiddle.net/mn9LV/1/ – riotgear Jan 09 '14 at 17:14
1

You're trying to run before you can walk. Read a good JS book like "Javascript: The Good Parts" before starting on a project like this. Also consider using a library like JQuery, for cleaner HTML handling code. – slim Jan 09 '14 at 17:19

score 1 · Answer 3 · answered Jan 09 '14 at 16:50

1

Just a couple of double quotes missing.
This part: var obj = eval ("(" + txt + ")"); is not necessary I set it like this var obj = txt; for quickness.

Take a look to your code:

See your code now: http://jsfiddle.net/KLer3/6/

answered Jan 09 '14 at 16:50

Wilson

608
5
16

slim · Answer 4 · 2014-01-09T17:02:43.793

There are missing quotes in your JSON. For example:

"speci":"human female",occup": "Movie Producer",

... is missing the opening quote for "occup" (and there are more, similar errors).

Fix these and your code works.

However, it's not good practice to use eval() to parse JSON, since it allows injection of code other than data structure assignment.

Use JSON.parse() instead:

var obj = JSON.parse(txt);

I assume you are writing JSON strings by hand as a way to experiment. Don't do this in real code. Use JSON.stringify(), or its equivalent on the server-side language.

If you really want your data inline with your code, you don't need JSON at all - just declare it in-place:

var obj = { characters: [
   {"fullName":"John Doe","speci":"human male", ... },
   {"fullName":"Jane Doe","speci":human female", ... },
   ...
]};

score 0 · Answer 5 · answered Jan 09 '14 at 16:46

0

You have multiple syntax errors with missing quotation marks " - Make sure the code is written correctly before assuming you did something wrong... Otherwise seems like it should work...

answered Jan 09 '14 at 16:46

MaineCoder

159
1
10

Yes. Yes! Thank you all This is exactly what I had in mind. Any idea how I can make my character array spit out all of the data on the page at once. Like if I had 30 different characters and wanted them all to display. http://jsfiddle.net/mn9LV/ – riotgear Jan 09 '14 at 16:59

score 0 · Answer 6 · answered Jan 09 '14 at 16:46

Your string should look like this:

var txt='{'
+    '"characters": ['
+        '{'
+            '"fullName": "John Doe",'
+            '"speci": "human male",'
+            '"occup": "Web Personality",'
+            '"cide": "Sleeper",'
+            '"descr": "blah",'
+            '"biog": "blarg",'
+            '"allia": "chaos good"'
+        '},'
+        '{'
+            '"fullName": "Jane Doe",'
+            '"speci": "humanfemale",'
+            '"occup": "Movie Producer",'
+            '"cide": "Citric",'
+            '"descr": "bluh",'
+            '"biog": "blurg",'
+            '"allia": "neutral"'
+        '},'
+        '{'
+            '"fullName": "Canter Doma",'
+            '"speci": "alienmale",'
+            '"occup": "Chef",'
+            '"cide": "Galv",'
+            '"descr": "bleh",'
+            '"biog": "blerg",'
+            '"allia": "evil"'
+        '}'
+    ']'
+'}';

But as noted in the comments, doing this parsing by hand isn't the best practice.

json objects javascript confusion

6 Answers6