How to use JSON data with Javascript

Question

I'm new to javascript and therefore don't really know how to ask the question I'm trying to ask. The point of saying that is to apologize if this is a duplicate question. With that being said, I stumbled across this site and want to utilize the approach talked about here. Given that my use cases for a tool like this will involve generating JSON dynamically with Python or R, I'd like to know how to

a) Generate the JSON appropriately.

b) Integrate that with a <script> tag to make it a JSON object in Javascipt.

Here is the code I have now:

html <- paste('<head><link title="timeline-styles", rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css"><script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script></head><body><div id="timeline-embed" style="width: 100%; height: 600px"></div><script type="text/javascript">var timeline_json=', readr::read_lines("~/projects/timelineJS/trial.json") %>% paste(collapse=''),'; window.timeline=new TL.Timeline("timeline-embed", timeline_json);</script></body>', sep='')
write(html, file="~/projects/timelineJS/test.html")

The output appears to be what I'd want (the output below has been cleaned up):

<head>
  <link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
  <script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
</head>
<body>
  <div id="timeline-embed" style="width: 100%; height: 600px"></div>
  <script type="text/javascript">
    var timeline_json={"title": {"media": {"url": "//www.flickr.com/photos/tm_10001/2310475988/", "caption": "Whitney Houston performing on her My Love is Your Love Tour in Hamburg.", "credit": "flickr/<a href='http://www.flickr.com/photos/tm_10001/'>tm_10001</a>"}, "text": {"headline": "Whitney Houston<br/> 1963 - 2012", "text": "<p>Houston's voice caught the imagination of the world propelling her to superstardom at an early age becoming one of the most awarded performers of our time. This is a look into the amazing heights she achieved and her personal struggles with substance abuse and a tumultuous marriage.</p>"}}, "events": ["media": {"url": "https://youtu.be/fSrO91XO1Ck", "caption": "", "credit": "<a href=\"http://unidiscmusic.com\">Unidisc Music</a>"}, "start_date": {"year": "1978"}, "text": {"headline": "First Recording", "text": "At the age of 15 Houston was featured on Michael Zager's song, Life's a Party."}]};
    window.timeline = new TL.Timeline("timeline-embed", timeline_json);
  </script>
</body>

However, when I load the html file, it's just a blank screen. I don't know what I'm doing well enough to know where to start debugging, so any help in the right direction would be greatly appreciated. Thanks!

if you add some text in body part.. that too it will not display? — Vishal
– Vishal, Commented Sep 22, 2015 at 5:00
No, if I add <p>This is a test</p> it does display properly. And underneath the div as well, so the div is being generated, just not the content it seems. — tblznbits
– tblznbits, Commented Sep 22, 2015 at 5:03
The events need to be an array of objects so you need "events" : [{ ... }]. IOW you are missing the {} within this declaration. — user2417483
– user2417483, Commented Sep 22, 2015 at 5:12
@jeff - You nailed it! Please submit it as an answer so I can accept. Also, if you're up to the task of typing out an explanation about the difference between [...] and [{...}], I'd greatly appreciate it. Either way, thanks for the fix! — tblznbits
– tblznbits, Commented Sep 22, 2015 at 5:15

user2417483 · Accepted Answer · 2015-09-22 05:27:53Z

1

The events need to be an array of objects.

A normal array would only hold a single value i.e. Days = [ "mon", "tues" .... } .

An object can hold multiple pieces of information (even functions).

You need to tell JavaScript that you want to use an array[] and this array contains multiple objects {} so you end up with [{},{},{},{}].

Using your previous code you are telling the JSON parser to expect an array. The parser looks up the value upto the : . Since this is not an array delimiter it causes the parser to throw an error

"events": [
  "media": {
     "url": "https://youtu.be/fSrO91XO1Ck", 
     "caption": "", 
     "credit": "<a href=\"http://unidiscmusic.com\">Unidisc Music</a>"
  }, 
  "start_date": {"year": "1978"}, 
  "text": {
     "headline": "First Recording", 
     "text": "At the age of 15 Houston was featured on Michael Zager's song, Life's a Party."
  }
]

This code tells the parse to expect an array [ the next symbol is for an object. So the parser will then expect an array of one or more objects.

"events": [{
  "media": {
     "url": "https://youtu.be/fSrO91XO1Ck", 
     "caption": "", 
     "credit": "<a href=\"http://unidiscmusic.com\">Unidisc Music</a>"
  }, 
  "start_date": {"year": "1978"}, 
  "text": {
     "headline": "First Recording", 
     "text": "At the age of 15 Houston was featured on Michael Zager's song, Life's a Party."
  }
}]

The parser if very fussy. If it finds a error then it will stop processing the data. Be sure to look at the browsers console log (F12 and console - in Chrome).

answered Sep 22, 2015 at 5:27

user2417483

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

1 Comment

tblznbits Over a year ago

This gets the page to load in RStudio's Viewer Pane, but no in Mozilla Firefox. Looking at the console log, I'm getting a ReferenceError: TL is not defined. I posted a new question on SO if you care to save the day twice in one night: stackoverflow.com/questions/32709272/…

Collectives™ on Stack Overflow

How to use JSON data with Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related