Tutorials on working with dynamic data (parsing JSON)?

1

Hi All,

Working on a new project with a transit API to provide dynamic information about bus schedules. From API I am able to return json values, but am new to Hype and don’t know if there is any documentation about how to display and refresh returned values on a 30 second interval. Looking for someone to point me in the correct direction here…

I am posting the following example for bus stop 3211:

http://api.transitime.org/api/v1/key/5ec0de94/agency/san-joaquin/command/predictions?s=3211&format=json

returns the following predictions.json file

{
    "predictions": [{
        "routeShortName": "61",
        "routeName": "61 - Dtc - Pershing - Malls",
        "routeId": "61",
        "stopId": "3211",
        "stopName": "Alpine & Grange Av Wb",
        "stopCode": 3211,
        "destinations": [{
            "directionId": "1",
            "dir": "1",
            "headsign": "Southbound Downtown Transit Center Arr A",
            "predictions": []
        }, {
            "directionId": "1",
            "dir": "1",
            "headsign": "Quail Lakes - Pershing - Country Club - Dtc",
            "predictions": []
        }]
    }, {
        "routeShortName": "745",
        "routeName": "745 - Malls - Pershing - Country Club",
        "routeId": "745",
        "stopId": "3211",
        "stopName": "Alpine & Grange Av Wb",
        "stopCode": 3211,
        "destinations": [{
            "directionId": "1",
            "dir": "1",
            "headsign": "Robinhood - Quail Lakes - Pershing - Alpine - Country Club",
            "predictions": []
        }]
    }, {
        "routeShortName": "4",
        "routeName": "4 - Metro Hopper - Central Stockton",
        "routeId": "4",
        "stopId": "3211",
        "stopName": "Alpine & Grange Av Wb",
        "stopCode": 3211,
        "destinations": [{
            "directionId": "0",
            "dir": "0",
            "headsign": "Pershing - Flora - Commerce - Dtc",
            "predictions": []
        }]
    }]
}

My goal is to display a table with the following “routeId” “headsign” “min”. Looking for any documentation on how to accomplish this with Hype. Thanks all for any guidance on how to accomplish this with this wonderful tool.

2

Hi Jeremy (@jerander)

There are probably a few examples here on getting JSON data but unfortunately no particular “tutorial” on how to do it per se.

Here is a quick document to show you a way to do it in Hype using Javascript functions to get the data and then populate some “elements” (rectangles) with the parsed JSON data.

On document load (scene load) the recursive function calls itself and then does this again every 30 seconds with the data you want. I have also included a conditional to check if mins is available and if it isn’t it prints out a phrase instead.

If you want any more specifics and more tutoring :slight_smile: send me a private message and I’ll see what I can do :wink:

jsonData-v1.zip (17.2 KB)

3 Likes
3

Super cool of you to post this example for others to see. I’ll review tonight and let you know if I have any questions. Greatly appreciated and I owe you one!

4

Is there a trigger, that when this ‘updates’ an animation or repeat animation call can be made?

5

Here is another example with an event handler How to make a whole editable website with Hype

So loading always triggers the event handler

1 Like