如何将timeline.js 源更改为接收JSON 字符串而不是JSON 文件？答案

【问题标题】：How to change timeline.js source to instead of a JSON file receive a JSON string?如何将timeline.js 源更改为接收JSON 字符串而不是JSON 文件？
【发布时间】：2014-02-18 10:41:29
【问题描述】：

我有一个使用 Timeline.js 的时间线，但目前这个故事是来自 .json 文件的红色，对我来说这不是理想的情况。

我有一个处理信息并将 JSONObject 放在一起的 servlet，我将其传递给具有 Timeline.js 的页面。

时间线.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Load Example Timeline</title>
<meta name="description" content="TimelineJS example">
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

    <div id="timeline-embed"></div>
    <script type="text/javascript">
        var timeline_config = {
            width:              '100%',
            height:             '600',
            source:             '${timeline}',
            embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
            start_at_end:       false,                          //OPTIONAL START AT LATEST DATE
            start_at_slide:     '4',                            //OPTIONAL START AT SPECIFIC SLIDE
            start_zoom_adjust:  '3',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
            hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES
            font:               'Bevan-PotanoSans',             //OPTIONAL FONT
            debug:              true,                           //OPTIONAL DEBUG TO CONSOLE
            lang:               'pt',                           //OPTIONAL LANGUAGE
            maptype:            'watercolor',                   //OPTIONAL MAP STYLE
            css:                'css/timeline.css',     //OPTIONAL PATH TO CSS
            js:                 'js/timeline-min.js'    //OPTIONAL PATH TO JS
        }
    </script>
    <script type="text/javascript"
        src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

</body>
</html>

在源代码下的正常内容是 json 文件。但我需要放一个从 servlet 发送的 JSONObject。

TimelineServlet.java 的doGet 方法：

@Override
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        List<LifeEvent> lifeEvents = new ArrayList<LifeEvent>();

        lifeEvents.add(eventProducer.generateRandomLifeEvent(true));

        JSONObject timeline = JSONString(lifeEvents);

        request.setAttribute("picPath",
                PropertyLoader.getStringValue("PICTURE_DIRECTORY_REL")+"/");
        request.setAttribute("timeline", timeline);

        getServletConfig().getServletContext()
        .getRequestDispatcher("/Timeline.jsp")
        .forward(request, response);
    }

我知道时间线会根据他们提供的文件返回格式正确的故事情节。

这是从代码中生成的 JSONObject：

{
   "Timeline":{
      "headline":"Your life events",
      "startDate": "Tue Feb 18 10:39:10      GMT 2014",
      "text":"Life events with different media types",
      "date":[
         {
            "headline":"Another nice day",
            "startDate": "Tue Feb 18 10:39:10            GMT 2014",
            "text":"Another nice day",
            "asset":[
               {
                  "caption":"Rita HenriquesCarlos Barata",
                  "credit":"Carlos Barata",
                  "media":"porsche.jpg"
               }
            ],
            "endDate": "Tue Feb 18 10:39:10            GMT 2014"
         }
      ],
      "type":"default"
   }
}

【问题讨论】：

标签： java javascript json servlets timeline.js

【解决方案1】：

我已经收到了。

我需要做的是：

<script type="text/javascript">
    var dataObject = ${timeline};
        var timeline_config = {
            width:              '100%',
            height:             '600',
            source:             dataObject,
            embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
            start_at_end:       false,                          //OPTIONAL START AT LATEST DATE
            start_at_slide:     '0',                            //OPTIONAL START AT SPECIFIC SLIDE
            start_zoom_adjust:  '3',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
            hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES
            font:               'Bevan-PotanoSans',             //OPTIONAL FONT
            debug:              true,                           //OPTIONAL DEBUG TO CONSOLE
            lang:               'pt',                           //OPTIONAL LANGUAGE
            maptype:            'watercolor',                   //OPTIONAL MAP STYLE
            css:                'css/timeline.css',     //OPTIONAL PATH TO CSS
            js:                 'js/timeline-min.js'    //OPTIONAL PATH TO JS
        }
    </script>

【讨论】：