解析JSON并为SIMILE的时间线小部件自定义它

时间:2010-09-17 23:04:34

标签: jquery json parsing simile

我有一个有效的JSON数据集:

[
    {
        "date": "2008-02-04 19:30:00", 
        "authors": [
            {
                "first_name": "Nassim Nicholas", 
                "last_name": "Taleb"
            }
        ], 
        "icon": "djlongnow_media/seminar_icons/salt-020080204-taleb.jpg", 
        "slug": "the-future-has-always-been-crazier-than-we-thought", 
        "title": "The Future Has Always Been Crazier Than We Thought"
    }, 
    {
        "date": "2008-01-11 19:30:00", 
        "authors": [
            {
                "first_name": "Paul", 
                "last_name": "Saffo"
            }
        ], 
        "icon": "djlongnow_media/seminar_icons/salt-020080111-saffo.jpg", 
        "slug": "embracing-uncertainty-the-secret-to-effective-forecasting", 
        "title": "Embracing Uncertainty: the secret to effective forecasting"
    }, 
    {
        "date": "2007-12-14 19:30:00", 
        "authors": [
            {
                "first_name": "Jon", 
                "last_name": "Ippolito"
            }, 
            {
                "first_name": "Joline", 
                "last_name": "Blais"
            }
        ], 
        "icon": "djlongnow_media/seminar_icons/salt-020071214-blais-ippolito.jpg", 
        "slug": "at-the-edge-of-art", 
        "title": "At the Edge of Art"
    },
]

我想将它提供给SIMILE Timeline js项目:http://www.simile-widgets.org/timeline/,它希望采用以下格式的JSON:

[
        {
            "title" : "The Dark Knight",
            "start" : "2008-07-18",
            "link" : "http://www.imdb.com/title/tt0468569/",
            "icon" : "http://m001.blogmatrix.net/silk_icons/film.png",
            "description" : "Why So Serious?"
        },
        {
            "title" : "The X-Files: I Want to Believe",
            "start" : "2008-12-02",
            "link" : "http://www.imdb.com/title/tt0443701/",
            "icon" : "http://m001.blogmatrix.net/silk_icons/film.png",
            "description" : "Six years after the events of The X-Files series finale, former FBI agent Doctor Dana Scully is now a staff physician at Our Lady of Sorrows, a Catholic hospital, and treating a boy named Christian who has Sandhoff disease, a terminal brain condition. FBI agent Drummy arrives to ask Scully's help in locating Fox Mulder, the fugitive former head of the X-Files division, and says they will call off its manhunt for him if he will help investigate the disappearances of several women, including young FBI agent Monica Banan. Scully agrees and convinces Mulder who is living in a nearby small home, bearded and clipping newspaper articles about the paranormal to help, despite Mulder's initial misgivings that this is an FBI trick to capture him."
        },
        {
            "title" : "Hancock",
            "start" : "2008-11-25",
            "link" : "http://www.imdb.com/title/tt0448157/",
            "icon" : "http://m001.blogmatrix.net/silk_icons/film.png",
            "description" : "John Hancock (Will Smith) is an unhappy and reluctant superhero who is living in his own world. For some unknown reason, Hancock is depressed and has started drinking very heavily. He has saved many lives in Los Angeles over the years, but in doing so, he has no regards for damaging buildings, trains, roads, cars, or anything that gets in his way of getting the job done. The last time he captured several criminals, it cost the city $9 million to fix the damages. The public has had enough of Hancock, and they want him to stop or go to another city. Then one day, Hancock saves the life of Ray Embrey (Jason Bateman) from being run over by a train. Ray is a public relations executive who now can go home to his wife and child, because Hancock was there. Ray owes Hancock his life, and he makes it his mission to change his superhero's image and have the public cheering him. Ray's wife, Mary (Charlize Theron), believes Hancock cannot be fixed, and she doesn't want Ray to be hurt. Douglas Young (the-movie-guy)"
        }
]

我理解的是,我将首先使用JS(或者可能是一个框架使其变得更容易,比如jQuery)来解析这个文件(在我绘制SIMILE Widget /代码之前)并重新格式化数据以适应SIMILE的格式。

事情是,我不知道该怎么做。这种转换是在浏览器中发生的吗?我在哪里以及如何调用它(最终的JSON结果)?

我使用django-piston来生成我的JSON(基于我的模型)。也许为Piston制作一个自定义模板会更容易/更好吗?

4 个答案:

答案 0 :(得分:0)

  

也许为Piston制作自定义模板会更容易/更好?

商定

答案 1 :(得分:0)

你不需要jQuery。您只需要Crockford JSON解析器。得到它(http://www.json.org/)。 这会将JSON响应转换为有效的JavaScript对象。以您喜欢的方式播放对象并创建另一个对象,然后使用相同的脚本生成JSON字符串。

如果您已经拥有jQuery,它可以让您的生活更轻松。使用$ .getJSON发出AJAX请求并同时解析JSON文件。要发送数据,请使用数据类型为“JSON”的AJAX函数,并为新的JSON对象提供数据。

答案 2 :(得分:0)

var _forMattedJsonForTimeLine=[];
jQuery.each(_yourCurrentUnFormattedJson,function(index,item){
      var _entry={};
      _entry.title=item.title;
      _entry.start=item.date;
      _entry.link=link// i dint found this in your json
      _entry.icon=item.icon;
      _entry.description=item.slug;

      _forMattedJsonForTimeLine.push(_entry);
});

your json is ready here

答案 3 :(得分:0)

我也同意单独的模板会更好。尽一切努力重新格式化客户端似乎很浪费。但这是另一个想法,也许你可以修改你的json与时间轴兼容。这样你只需要生成一次并将它用于两个不同的目的。

您可以将您喜欢的任何属性添加到时间轴json格式。例如,在我的一个时间轴上,我有一个属性'mapKeys'来驱动链接的谷歌地图。时间线不受额外属性的困扰,只要它使用预期的键找到所需的值即可。

[
        {
            "title" : "The Dark Knight",
            "start" : "2008-07-18",
            "link" : "http://www.imdb.com/title/tt0468569/",
            "icon" : "http://m001.blogmatrix.net/silk_icons/film.png",
            "description" : "Why So Serious?",
            "mapKey" : "Gotham City",
            "authors" : {
                "first_name": "Bruce", 
                "last_name": "Wayne"
             },
            "whateverOtherPropertyYouLike" : "foo, bar, baz"
        }, etc.