// you’re reading...

Google

Google Polymer 1.0: Simple code to bind JSON data from PHP with iron-ajax and template dom-repeat

I have been following Google Polymer for Web apps since version 0.5. I wrote a couple of prototype mobile web apps using it. One of the prototype apps that I wrote in version 0.5 was using Facebook Parse. In this app, I used Polymer’s template data binding (with repeat attribute) extensively with Facebook Parse. Polymer’s template binding with repeat attribute is quite useful to display rows of data from a database.

With the release of Polymer 1.0 (a.k.a. production ready), I started using it for yet another app. Things have changed a lot since version 0.5. Has the template data binding got easier? This time, for this new app, I had to bind the template with data coming from a PHP script.

With Polymer 1.0, the template binding with dynamic data indeed is easy. But the lack of examples makes it tricky. In my new app, I was trying to fire an AJAX request to a PHP script, via Polymer’s iron-ajax element, and directly binding it to a template with dom-repeat (“repeat” in the earlier version).To start with, I spent hours to achieve this simple code (see below). What added to the confusion were google results suggesting:  “JSON response from iron-ajax cannot be directly bound to a template”, “you need extra code to convert JSON objects to array” and “PHP has problem with data binding”.

Finally I achieved this simple code (see below) which uses Polymer’s iron-ajax element with template elements’s “dom-repeat” to display the JSON data returned by a PHP script.

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0">
 <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
 <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
</head>
<body class="unresolved">
<template is="dom-bind">
 <template is="dom-repeat" items="{{data}}">
 <span>{{item.id}}</span>
 <span>{{item.name}}</span>
 <br />
 </template>
 <iron-ajax auto id="GetData" url="getdata.php" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
</body>
</html>

All the heavy lifting is done by iron-ajax and the template elements. Note that, the last-response attribute of iron-ajax stores the data returned by getdata.php (see below) in the “data” property. The data property is in turn used by the template (via items=”{{data}}” for the binding. The ajax request is fired as soon as the page is loaded (via auto attribute of iron-ajax) and the results are automatically bound with the template. Each item/row of the database (see getdata.php code below) is represented by the item object and the columns are it’s properties e.g. item.id and item.name

The getdata.php called by iron-ajax is as follows:

<?php
$conn=mysql_connect("localhost","user","secret");
mysql_select_db("mydb",$conn);


$query = "select id,name from tbl";
$query_result = mysql_query($query);
$output = array();
$i=0;
while($row=mysql_fetch_array($query_result,MYSQL_ASSOC))
 {
 $output[$i]["id"]=$row["id"];
 $output[$i]["name"]=$row["name"];
 $i++;
 }

print json_encode($output);
?>

The above is a simple PHP code which connects to a MYSQL database (mydb) and retrieves the rows from a table named tbl. This table has two columns: id and name. The PHP code constructs an array (named $output) with the rows and prints the JSON encoded array.

Simple! Right?

What I like about Google Polymer is it’s rich and jazzy UI, web components (which helps to contain and separate code) and data binding. All of this, offered in one framework! I hope the framework matures with more components, better documentation and more, simple examples. And I wish all the desktop and mobile web browsers gear up to work consistently with Polymer 😉

 

GD Star Rating
loading...
GD Star Rating
loading...
Google Polymer 1.0: Simple code to bind JSON data from PHP with iron-ajax and template dom-repeat, 7.6 out of 10 based on 8 ratings
Share

Email This Post Email This Post Print This Post Print This Post Print This Post Post A Comment Tweet your comments/question to me @shekharg

Discussion

2 comments for “Google Polymer 1.0: Simple code to bind JSON data from PHP with iron-ajax and template dom-repeat”

  1. Hi, you need apache to work with php, right? Where do you place the getdata.php in the same folder with your element, or?

    Posted by Sergey | April 16, 2016, 8:30 pm
  2. Hi Sergey,

    Hi, you need apache to work with php, right?

    Yes

    Where do you place the getdata.php in the same folder with your element, or?

    As per the example in this blog post you will need to place it in the same directory as the HTML file. Also you can give an absolute URL like:

    Posted by Shekhar | April 16, 2016, 8:51 pm

Post a comment

Recent Tweets

Follow Me on Twitter