gpt4 book ai didi

javascript - 如何通过 Javascript 使用 JSON 数据

转载 作者:行者123 更新时间:2023-11-27 23:50:57 24 4
gpt4 key购买 nike

我是 javascript 新手,因此不知道如何提出我想问的问题。这么说的目的是为了如果这是一个重复的问题而道歉。话虽这么说,我偶然发现了this site并想利用所讨论的方法here 。鉴于我对此类工具的用例将涉及使用 Python 或 R 动态生成 JSON,我想知道如何

a) 正确生成 JSON。

b) 将其与 <script> 集成标签使其成为 Javascipt 中的 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 和控制台 - 在 Chrome 中)。

关于javascript - 如何通过 Javascript 使用 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32708594/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com