Question

我是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文件时，它只是一个空白屏幕。我不知道我做得多好，知道从哪里开始调试，所以对于正确方向的任何帮助将不胜感激。谢谢！

Answer 1

事件需要是一个对象数组。

普通数组只能保存一个值，即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使用JSON数据

1 个答案: