Parsing JSON and customizing it for SIMILE's Timeline Widget

Question

I have a valid JSON dataset:

[
    {
        "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"
    },
]

And I'd like to feed it into the SIMILE Timeline js project: http://www.simile-widgets.org/timeline/ which expects JSON in the follow format:

[
        {
            "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)"
        }
]

What what I understand, I will have to use JS (or perhaps a framework to make it easier, like jQuery) to first parse this file (before I draw the SIMILE Widget/code) and reformat the data to fit SIMILE's format.

Thing is, Im not sure how to do this. Does this conversion happen IN the browser? Where and how do I call it (the final JSON result)?

Im using django-piston to generate my JSON (based on my models). Perhaps making a custom template for Piston would be easier/better?

Answer 1

Perhaps making a custom template for Piston would be easier/better?

Agreed

Answer 2

You don't need jQuery. All you need is Crockford JSON parser. Get it (http://www.json.org/). This will turn the JSON response into a valid JavaScript Object. Play with the object the way you like it and create the other object and then use the same script to generate the JSON string.

If you already have jQuery, it can make your life a lot easier. Use $.getJSON to make an AJAX request and parse a JSON file in the same time. For sending data, use AJAX function with the data type "JSON" and data your new JSON object.

Answer 3

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

Answer 4

I agree too that a separate template would be better. Doing all that reformatting client-side seems wasteful. But here's another thought, maybe you could modify your json to be compatible with timeline. That way you only have to generate it once and use it for two separate purposes.

You can add any properties you like to the timeline json format. On one of my timelines, for example, I've got a property 'mapKeys' that drives a linked google map. Timeline isn't bothered by the extra property so long as it finds the values it needs using the keys it expects.

[
        {
            "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.