I am new to polymer and I am trying to create a simple management web app for my company.
So I have a query from my database that returns a simple list of varchar (a list of names of customers), that I want to display in a paper-listbox element or iron-list element (the items will be clickable and show info about the person).

I have tried using straight php into the items property, but it doesn't work: 

```
<iron-list items="<?php echo $jsonresult;?>" as="item">

```

I've tried using Polymer Expression but is not working.
I've tried using a script tag with some javascript code into it as a last chance, but nada.

All I see in the page is empty space.
I am using chrome on a fedora machine - VScode as IDE - xDebug to debug php.

How the hell do I do this?
the code is all in one script main-view.html:

```
<?php

//db data
$host = '192...... etc etc ';
$dbuser = 'myuser ';
$dbpass = 'mypass';
$dbname = 'mydatabase';

$conn = mysqli_connect($host, $dbuser, $dbpass, $dbname);

if (!$conn)
{
    echo "Error: Unable to connect " . PHP_EOL;
    echo "Debugging Error: " . mysqli_connect_errno() . PHP_EOL;
    exit;
}
else
{
    echo "Hurray" . PHP_EOL;
}

$sql = "SELECT username as user FROM mytable where condition";
$result = $conn->query($sql);

if ($result->num_rows > 0)
{
    echo "Query executed rows--> : " . $result->num_rows . " rows. " . PHP_EOL;
    $rows = array();

    while ($r = mysqli_fetch_assoc($result))
    {
        $rows[] = $r;
    }
}

```

?>

```
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

        <title>Title</title>

        <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>

        <link rel="import" href="../bower_components/polymer/polymer.html">
        <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
        <link rel="import" href="../bower_components/paper-item/paper-item.html">
        <link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
        <link rel="import" href="../bower_components/iron-list/iron-list.html">    

        <style is="custom-syle">

            .horizontal-section {
                padding: 0 !important; 
            }

            .avatar {
                display: inline-block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                background: #ccc;
            }

            paper-item {
                --paper-item: {
                    cursor: pointer;
                }
            }

            .sublist {
                padding-left: 20px;
                padding-right: 20px;
            }
        </style>

    </head>
<body unresolved>
<dom-module id="main-view">
    <template>

    <div class="horizontal-section-container">
        <div>
            <h4 style="margin-left: 15px;">Customers Table</h4>
            <div class="horizontal-section">
                <paper-listbox id="list" items="[[arraySource]]">
                </paper-listbox>
            </div>
        </div>
    </div>

    </template>

    <script>
        Polymer ({
            is: 'main-view' 
        });
    </script>

    <script type="javascript">
        var arraySource = <?php echo json_encode($rows); ?>;
        document.getElementById('list').items = arraySource;
    </script>

</dom-module>
</body>

```

Thanks in advance for the help, and sorry for the grammar --> english is not my first language.