Polymer data binding to MySQL table data with PDO - php

Question

I am trying to sync some polymer element properties with a MySQL database on localhost using MAMP.
How do I pass the SQL data from a PHP variable to a Polymer data binded property?
The Polymer element is as follows:
<iron-ajax id="ajax"
auto
url="../src/data/php/get_data.php"
last-response="{{lastResponse}}"
handle-as="text"></iron-ajax>
...
static get properties() { return {
lastResponse: {
type: Object,
value: {}
}
}}
lastResponse () {
console.log(this.lastResponse);
}
The PHP script is as follows:
<?php
$servername = "localhost";
$username = "***";
$password = "***";
$dbname = "myDB";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
echo $v;
}
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
?>

Answer 1

PHP function
get_data.php
should echo(not return) JSON, as:
$res['data'] = 'Hello!';
echo json_encode($res);
and iron-ajax should be set to receive JSON:
handle-as="json"
as in docs here
https://www.webcomponents.org/element/PolymerElements/iron-ajax/elements/iron-ajax
In Polymer first execute the AJAX request, and then receive the data as this:
get_data_responseHandler: function(e) {
console.log(e.detail.response);
}
That is how API point is created.