---
title: "Retrieving Data from MySQL | Docs"
description: "To retrieve data from MySQL, follow this documentation which assumes you have MySQL installed and your data stored in a database."
url: https://www.zinggrid.com/docs/data/mysql
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/data/mysql.md
mode: provenance
representation: markdown
origin_response_id: 3e109964b339270765901bf8e6ec4ef0
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.668Z
version_nonce: 022ed1f679c433bac3a6348122530605
generated_at_utc: 2026-10-25T14:50:16.100Z
response_nonce: 100ae908382277277ef6ee078750a8c0
```

# Retrieving Data from MySQL

In this guide, we'll walk you through how to retrieve data from MySQL with PHP or Node/Express and incorporate it in your grid.

> **Note:** In the examples below, we assume that you have MySQL installed and have your data stored in a database. If not, refer to the [MySQL Documentation](https://dev.mysql.com/doc/refman/8.0/en/installing.html).

For our example, we set up a database `mydb`, which contains the table `user`:

```text
mysql> SELECT * FROM user;
+-------+------+
| name  | age  |
+-------+------+
| Tim   |   21 |
| Alice |   30 |
| Henry |   45 |
+-------+------+
```

## Using PHP

### Connecting to the Database

To retrieve our data using PHP, we'll start by creating a connection to MySQL in our PHP file, like so:

```javascript
<script>
  <?php
    $mysqli = new mysqli("localhost", "user", "password", "mydb");

    if($mysqli->connect_error) {
      die('Connect Error (' . $myssqli->connect_errno . ')' . $mysqli->connect_error);
    }
  ?>
</script>
```

Then, we'll execute a query to get the rows we want from our database. In this case, we are getting all rows from the `user` table:

```javascript
<script>
  <?php
    ...
    $mydata = []; /* will be used to store result array */

    if ($result = $mysqli->query("SELECT * FROM user")) {
      $mydata = $result->fetch_all(MYSQLI_ASSOC);
      $result->close();
    }
  ?>
</script>
```

### Populating the Grid

We'll need to convert the PHP array so that we can use it in our JavaScript code. Then, we can close the connection to MySQL:

```javascript
<script>
    ...
    var dataValues = <?php echo json_encode($mydata) ?>;
    <?php
      $mysqli->close();
    ?>
</script>
```

Now, we'll create a `<zing-grid>` tag and set its data:

```javascript
<script>
  window.onload = function() {
    document.querySelector('zing-grid').data = dataValues;
  }
</script>
<zing-grid></zing-grid>
```

## MySQL and PHP Grid

Here is our complete grid pulling in data from MySQL with PHP:

[Example code](https://app.zingsoft.com/demos/embed/KQ6ODK7N)

## Using Node/Express

### Connecting to the Database

To retrieve our data using Node/Express, we'll start by creating a connection to the server and our database `mydb` in our server.js file:

```javascript
var mysql = require('mysql');
var express = require('express');
var app = express();

var connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'user',
  password: 'password',
  database: 'mydb'
})
```

### Populating the Grid

To fetch the entries in the `user` table to use in our grid, we'll create a route path at `/mydb`, which will then display the table contents.

```javascript
app.get('/mydb', function(req, res) {
  connection.query(queryString, function(err, rows, fields) {
    if (err) throw err;
    res.send(rows);
  });
});
```

Now in our HTML file, we can create our grid and set the `src` attribute to this URL to read from the database.

```html
<zing-grid src="http://localhost:3000/mydb"></zing-grid>
```

Then, we'll run our server from the command line with:

```text
node server.js
```

## MySQL and Node/Express Grid

Here is our complete grid pulling in data from MySQL with Node/Express:

[Example code](https://app.zingsoft.com/demos/embed/KQ6ODK7N)