Iron-ajax example

by Marcus Carey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<base href="https://polygit.org/polymer+v1.10.1/paper-card-*+PolymerElements+*/components/">

<link href="polymer/polymer.html" rel="import">
<link href="iron-ajax/iron-ajax.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">
<link href="paper-spinner/paper-spinner.html" rel="import">

<template is="dom-bind" id="sample-app">

  <iron-ajax url="https://jsonplaceholder.typicode.com/posts"
             auto
             handle-as="json"
             content-type="application/json"
             last-response="{{posts}}"></iron-ajax>
             
             
  <iron-ajax url="https://jsonplaceholder.typicode.com/users"
             auto
             handle-as="json"
             content-type="application/json"
             last-response="{{users}}"></iron-ajax>
  
  <div id="spinnerContainer">
    <paper-spinner active="[[postsLoading]]" hidden$="[[!postsLoading]]"></paper-spinner>
  </div>
  
  <template is="dom-repeat" items="[[getPostsWithUser(posts,users)]]" as="post">
    <paper-card heading="[[post.title]]">
      <div class="card-content">
        <p>Posted by: [[post.username]]</p>
        <p>[[post.body]]</p>
      </div>
    </paper-card>
  </template>   
    
</template>

CSS

paper-card{
  margin: 15px;
}

#spinnerContainer{
  display: flex;
  justify-content: center;
}

JavaScript

HTMLImports.whenReady(function () {
	var app = document.querySelector('#sample-app');
  app.postsLoading = true;
  
  app.getPostsWithUser = function(posts, users){
  	var userDictionary = {};
    users.forEach(function(user){
    	if(!userDictionary[user.id]){
      	userDictionary[user.id] = user.username;
      }
    });
    
    posts.forEach(function(post){
    	post.username = userDictionary[post.userId];
    });
    
  	app.postsLoading = false;
    return posts;
  };
});