Retrieving Data from MongoDB

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

For our example, we set up a database mydb, which has the collection users with 3 documents:

{ name: "Tim", age: 21 },
{ name: "Alice", age: 30 },
{ name: "Henry", age: 45 }

Connecting to the Database

From the command line, we'll start a mongod process and pass in our database directory, like so:

mongod --dbpath=<dbdirname>

Then, in our server.js file, we'll create a connection to the server and our database mydb, like so:

var MongoClient = require('mongodb').MongoClient;
var express = require('express');
var app = express();

var url = 'mongodb://localhost:27017';

MongoClient.connect(url, function(err, client) {
  db = client.db('mydb');
});

Populating the Grid

To fetch the documents in the users collection to use in our grid, we'll create a route path at /mydb, which has the array of documents.

app.get('/mydb', function(req, res) {
  db.collection('users').find({}).toArray(function(err, docs) {
    res.send(docs);
  });
})

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

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

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

node server.js

MongoDB Grid

Here is our complete grid pulling in data from our MongoDB database:

Customizing the Grid

By default, MongoDB adds an _id field for each document. If you don't want to include a certain field in your grid, you can specify this using <zg-colgroup> and <zg-column>. Below, we show only the name field of our documents: