如何在Javascript中使用JSON数据
How to use JSON data with Javascript
我是javascript的新手,因此不知道如何问我想问的问题。这么说的目的是为了道歉,如果这是一个重复的问题。话虽如此,我偶然发现了这个网站,想利用这里讨论的方法。考虑到我对这样一个工具的用例将涉及使用Python或R动态生成JSON,我想知道如何
a)生成适当的JSON。
b)与<script>
标签集成,使其成为javascript中的JSON对象。
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")
输出似乎是我想要的(下面的输出已被清理):
<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>
然而,当我加载html文件时,它只是一个空白屏幕。我不知道我做得够好,知道从哪里开始调试,所以在正确的方向上的任何帮助将是非常感激的。谢谢!
事件需要是一个对象数组。
一个普通的数组将只保存一个值,即Days = [ "mon", "tues" .... }
。
对象可以保存多条信息(甚至函数)。
你需要告诉JavaScript你想使用一个数组[],这个数组包含多个对象{},所以你最终与[{},{},{},{}]
。
使用前面的代码,你告诉JSON解析器期望一个数组。解析器查找该值直到:。由于这不是数组分隔符,因此会导致解析器抛出错误
"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."
}
]
这段代码告诉解析期望一个数组[下一个符号是一个对象]。因此,解析器将期望得到一个或多个对象的数组。
"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."
}
}]
解析器非常繁琐。如果它发现一个错误,那么它将停止处理数据。请务必查看浏览器的控制台日志(F12和console - in Chrome)。
相关文章:
- 如何将JSON数据导入我的ejs模板
- 如何将json数据显示为html
- Json数据包含日期和时间格式
- 用我的json数据填充JQuery DataTable
- AngularJS加载JSON数据,然后从中解析/加载HTML
- 使用jquery读取Json数据
- 如何将本地json数据加载到Extjs数据模型中
- 如何使用jquery ajax和jsonp在您自己的域上读取json数据
- React-将jSON数据传递给子组件的子组件
- 尝试从控制器加载带有json数据的Simile时间线
- Jquery:对返回JSON数据的php脚本的Ajax调用
- 如何通过数据分组将json数据转换为嵌套的json数据格式
- 如何在ReactJs中显示Json数据
- 使用javascript进行JSON数据检索
- tu如何将id放在填充了json数据的html表td上
- 将JSON数据从服务器加载到knockout.jsobservable中
- 使用JavaScript处理JSON数据
- 如何将json数据传递到.js文件
- 如何在带有nunjucks和gullow数据的JSON数据中使用带有HTML的内容
- 如何使用var名称调用JSON数据