0

I'm working with Google's civic info API and I'm trying to figure out how to convert a JSON repsonse into a variable javascript object (we'll call that object civicInfoObject). Then I want to display to contents of that object onto the page with HTML. I'm new to javascript and haven't been able to successfully come up with a solution or find an answer.

It's a relative big project for me so I am working in bite-size pieces. I copied and pasted the JSON response to my query and created a new HTML document with it. So basically my goal right now is to store this static JSON string in a variable (civicInfoResponse), convert it into an object and store that in a variable (civicInfoObject), and then display the contents of that object onto a page with HTML.

Here is my strategy thus far: 

var civicInfoResponse = "copy-and-pasted string
that spans
multiple lines"

var civicInfoObject = JSON.parse(civicInfoResponse);

document.getElementById("Info").innerHTML = civicInfoObject;

Here is the fiddle I created so you can see the JSON response in its entirety: https://jsfiddle.net/km38o815/2/

The code I wrote might be completely wrong, I'm not sure. I'm having a hard time with my limited knowledge about javascript. Can anyone help me out or at least point me in the right direction? It would be very much appreciated. Thanks!

LeviJames
  • 188
  • 1
  • 18
  • cant you just put civicInfoResponse into the innerHTML? JSON.parse will give you a json object, but the innerhtml needs to be a string. also your fiddle wont work, you need to escape all those quotes. – kmacdonald Jul 10 '15 at 21:57
  • @kmacdonald Not to be pedantic but `JSON.parse` returns an object. JSON is a string. Clarifying for anyone who might read this and think that JSON is an object. – Jason Cust Jul 10 '15 at 22:01
  • Well, I could, but my next step is to loop through the object and output specific information (like the president's name), so I have to convert it into an object. But are the quotes what is causing the problem? Can I write a function to escape all the quotes so the string is read in its entirety? Thanks for the response by the way. – LeviJames Jul 10 '15 at 22:02
  • thanks for that clarification on JSON, Jason. – LeviJames Jul 10 '15 at 22:04

2 Answers2

0

I updated your fiddle. If you have the JSON you should need quotes around it? is this what you are looking for?

document.getElementById("Info").innerHTML = JSON.stringify(civicInfoResponse);

https://jsfiddle.net/km38o815/7/ oops this should work now.

kmacdonald
  • 3,381
  • 2
  • 18
  • 22
  • The quotes are part of what is returned with the JSON response. That's part of the reason I'm having a hard time finding an answer to this question. Also, I'm not sure that solution works because the JSON is already a string, right? – LeviJames Jul 10 '15 at 22:13
  • Ohh, I see what you're saying. The innerHTML needs to be a string. – LeviJames Jul 10 '15 at 22:14
  • Thanks for that fiddle update, that's awesome. I can see my logic was a little flawed. Thanks so much for your help! – LeviJames Jul 10 '15 at 22:31
0

This question is related to: JavaScript string with new line - but not using \n

In other words, if you need the JSON to span multiple lines, use \ before starting a new line:

var civicInfoResponse = "copy-and-pasted string \
that spans \
multiple lines"

civicInfoResponseshould contain:

copy-and-pasted string that spans multiple lines
amyspark
  • 520
  • 1
  • 4
  • 15