Using Polymer's iron-ajax to load json files

I'm beginning to see the usefulness of iron-ajax, not only as a way to communicate with API endpoints (iron-ajax supports GET/PUT/POST methods) but also as a way to help load data, specifically json data.

This means that you can store all your json data in a separate file on your server and then use iron-ajax to autoload the file. This is a HUGE benefit because it is way less coding than using javascript's loading mechanisms.

The other benefit of using iron-ajax is that you don't have to worry about the async chain (i.e. promises). Before, you would either have to do something like this:

loadJSONFromURL(dataUrl).then(
    successFunction(data){
     // Do something with the data and 
     // think about how to send/message the data
     // to where you really want it to be set.


     ////This could lead to further chaining here.

     }, errorFunction(err) {
      //
      // Error handling here      
     }); 

Or you would fire/listen for events... (not going to write code here).

In short, it was messy and hard to track.

I feel iron-ajax exists so that you can say, communicate with something, when you hear back, set it to a variable. This is good.

Here's how I currently use it

<iron-ajax
        auto
        url="RELATIVE_PATH_TO_JSON_FILE"
        handle-as="json"
        last-response="{{jsondata}}"></iron-ajax>

This basically will tell iron-ajax to try and load the json file as soon as it can (because of the auto attribute) and then load it into the variable jsondata.

jsondata can then be bound to some other element.

  <paper-card elevation="1">
    <div class="header">[[jsondata.memberVariable1]]</div>
    <div class="body">[[jsondata.memberVariable2]]</div>   
  </paper-card>

Note the square bracket [[ ]] are used here for one-way binding. The beauty of this is that it's done automatically. You now don't have to listen for a load event and then query/search/build a new element and set the data.

Daniel Tse

Read more posts by this author.

Subscribe to Daniel Tse, Engineer, Consultant

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!