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!
1 answers
solution1
1 ACCPTED 2015-09-22 05:27:53
The events need to be an array of objects.
A normal array would only hold a single value ie 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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.