Jason can make any type of network requests
  1. Basic GET, POST, PUT, DELETE requests to any URL
  2. Token authenticated network requests to any URL
  3. Oauth requests to any cloud API endpoint (Twitter, Tumblr, Reddit, etc.)

Try Demo

In this example we will use JSONPlaceholder API, a public fake data API for prototyping and testing.

Data

We will use the JSONPlaceholder photos API as data source.

Template

We will use this Jason template to describe how the client should render and handle events.


Tap this button on your iPhone to try:
{/·ᴥ·}/  Open in Jason »

What's going on here?

Template

Take a look at the following part:
"$jason": {
  "head": {
    "title": "JSONPlaceholder demo",
    "actions": {
      "$load": {
        "type": "$network.request",
        "options": {
          "url": "http://jsonplaceholder.typicode.com/photos"
        },
        "success": {
          "type": "$render"
        }
      }
    },
    ...
      
1. For now let's just understand that '$load' is an event triggered when the view loads. The $load event triggers a network request to the API url, and calls a "$render" action when it succeeds.

2. $render function renders the incoming data using the template part of the markup below.

Now let's look at the actual template part:
...
"items": {
  "{{#each $jason}}": {
    "type": "horizontal",
    "style": {
      "padding": "10",
      "spacing": "10"
    },
    "components": [
      {
        "type": "image",
        "style": {
          "width": "50"
        },
        "url": "{{thumbnailUrl}}"
      },
      {
        "type": "label",
        "style": {
          "size": "14"
        },
        "text": "{{title}}"
      }
    ],
    ...
      
3. Notice the '#each' key. This means it loops through '$jason' object to render the template. For now let's just understand that '$jason' contains the result from the previous network request call.

4. Notice the "image" and "label" components. "image" component has a url attribute of "{{thumbnailUrl}}". This means it fills out the template using 'thumbnailUrl' attribute of each item. Same goes for "{{title}}" for the label.

Data

Let's go back and look at the API data. Here's one of the items:
{
  "albumId": 1,
  "id": 1,
  "title": "accusamus beatae ad facilis cum similique qui sunt",
  "url": "http://placehold.it/600/92c952",
  "thumbnailUrl": "http://placehold.it/150/30ac17"
}
5. After filling in the template with this item, the resulting JSON would look like this:
"type": "horizontal",
"style": {
  "padding": "10",
  "spacing": "10"
},
"components": [
  {
    "type": "image",
    "style": {
      "width": "50"
    },
    "url": "http://placehold.it/150/30ac17"
  },
  {
    "type": "label",
    "style": {
      "size": "14"
    },
    "text": "accusamus beatae ad facilis cum similique qui sunt",
  }
]
      

6. Jason takes this markup and renders a layout that looks like this:


7. The end result of iterating through every item is:


8. Let's not forget the 'action' part at the bottom.
"{{#each $jason}}": {
  ...
  "action": {
    "type": "$widget.banner",
    "options": {
      "title": "You selected",
      "description": "{{title}}"
    }
  }
}
      

9. 'action' gets triggered whenever user touches the item. In this case, it displays a notification banner. You can learn more about actions here.


Learn more!

This is just a small portion of what you can do with Jason. Check out the documentation to learn what else you can do.

{/·ᴥ·}/  Go to documentation »