step-06

Polymer Beers - Polymer tutorial - Step 06

Enough of building an app with five beers in a hard-coded dataset! Let's fetch a larger dataset from our server using one of Polymer iron elements called iron-ajax.

Data

Our new dataset is now a list of 11 beers stored in JSON format in the data/beers/beers.json, available to your browser at the URL http://127.0.0.1:8000/data/beers/beers.json.

app/beers/beers.json:

[
  ...
  {
    "alcohol": 6.8,
    "description": "A reddish-brown abbey ale brewed with dark malts. The secondary fermentation gives a fruity aroma and a unique spicy character with a distinctive aftertaste. Secondary fermentation in the bottle.",
    "id": "AffligemDubbel",
    "img": "beers/img/AffligemDubbel.jpg",
    "name": "Affligem Dubbel"
  },
  ...
]

iron-ajax element

We will use the iron-ajax to make an HTTP request to your web server to fetch the data in the app/beers/beers.json file.

iron-ajax is one of the elements in the Polymer iron elements collection, a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps.

iron-ajax makes an HTTP GET request to our web server, asking for beers/beers.json (the url is relative to our index.html file). The server responds by providing the data in the JSON file. (The response might just as well have been dynamically generated by a backend server. To the browser and our app they both look the same. For the sake of simplicity we used a JSON file in this tutorial.)

To use iron-ajax in our application we need:

1. Add its dependency to bower.json and do a bower install (this step is not important for the tutorial as all dependencies are already recovered and ready in the bower_components folder).

{
  "name": "polymer-beers",
  "version": "0.0.0",
  "license": "http://polymer.github.io/LICENSE.txt",
  "dependencies": {    
    "bootstrap": "~3.3.6",
    "polymer": "~1.4.0",
    "iron-ajax": "iron-ajax#~1.2.0"
  }
}

1. Import iron-ajax in beer-list

<!-- Import iron-ajax to get the list of beers from the server -->
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

Then we can place an iron-ajax element in beer-list to request the beer list to the server:

    <iron-ajax
      auto
      url="../../data/beers/beers.json"
      params='{}'
      handle-as="json"
      on-response="gotBeers"
      on-error="gotError"
      debounce-duration="300"></iron-ajax>

In the on-response attribute we define what callback function will be called when the data is collected. We use that callback function to initialize the beers object.

The callback has two parameters, an event object that has all the information about the request life, and a iron-request object, where we can call the response property to get directly the response data.

    gotBeers: function(event, ironRequest) {
      this.beers = ironRequest.response;
    }

You can see all the details on using iron-ajax on its documentation page.

Showing more information

As now we recover more information for each beer (an id and an image URL), we are going to modify beer-list-item element to show it.

We begin by adding the missing properties:

  properties: {
    id: String,
    name: String,
    description: String,
    img: String,
    alcohol: String
  }

Then we modify the template:

  <template>
    <div id="{{id}}" class="beer clearfix">
      <img class="pull-right el-img" src="{{img}}">
      <h2 class="el-name">{{name}}</h2>
      <p class="el-description">{{description}}</p>
      <p class="pull-right el-alcohol">Alcohol content: {{alcohol}}%</p>
    </div>
  </template>

And we add some CSS to make things prettier:

  <style>
    .beer {
      margin: 10px;
      padding: 10px;
      border: solid 1px black;
      border-radius: 10px;
      min-height: 150px;
    }
    .el-img {
      max-height: 100px;
    }
    .el-alcohol {
      clear:both;
    }
  </style>

Summary

Now that you have loaded beer data from a server-side JSON file, go to step 7 to learn how to add the details of each beer.