如何在Javascript中使用JSON数据

Question

I'm new to javascript and therefore don't really know how to ask the question I'm trying to ask. 我是javascript的新手，因此真的不知道如何问我要问的问题。 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 鉴于我对此类工具的使用案例将涉及使用Python或R动态生成JSON，我想知道如何

a) Generate the JSON appropriately. a）适当地生成JSON。

b) Integrate that with a <script> tag to make it a JSON object in Javascipt. b）将其与<script>标记集成在一起，使其成为Javascipt中的JSON对象。

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. 但是，当我加载html文件时，它只是一个空白屏幕。 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! 谢谢！

Answer 1

The events need to be an array of objects. 事件必须是对象数组。

A normal array would only hold a single value ie Days = [ "mon", "tues" .... } . 普通数组将仅包含一个值，即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 [{},{},{},{}] . 您需要告诉JavaScript您要使用array []，并且此数组包含多个对象{}，所以最终得到[{},{},{},{}] 。

Using your previous code you are telling the JSON parser to expect an array. 使用您之前的代码，您告诉JSON解析器期望一个数组。 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). 确保查看浏览器控制台日志（F12和控制台-在Chrome中）。

如何在Javascript中使用JSON数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-22 05:27:53

如何在Javascript中使用JSON数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-22 05:27:53

解决方案1
1 已采纳 2015-09-22 05:27:53