CODEWITHSUNDEEP
htmlangularjsnode.jsmongodbexpress
Abhishek Parikh
Abhishek Parikh

Reputation: 989

Tabular representation of mongodb database with express and angular

I want to display the mongodb data in the form of table in html with node.js, express.js and angular.js.

What I am doing now is something like this

route.js

app.get('/superhero', function(req, res) {
    superhero.superhero_list(req,res); 
    res.sendfile('./public/superhero.html');
});

superhero.js

var express = require ('express')
var rootRequire = require('root-require');
var bodyParser = require('body-parser');
var superheroSchema = rootRequire('Anguar/models/superhero');
module.exports = {
superhero_list: function(req, res) {
        superheroSchema.find({}, function(err, superhero) {
            if (err) {
                return res.status(400).send({ "message": "Server error!", "err": err });
            }
            else {
                return res.status(200).send({ "superheros": superhero });
            }
}
};

superhero.html

<h1> Super heros</h1>

<table>
        <thead>
        <tr>
            <th>S.no</th>
            <th>Super hero</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        // to implement the table 
        </tr>
</table>

Problem I am facing is the response of the 

return res.status(200).send({ "superheros": superhero });

is directly giving me response

{"Superheros":[{"_id":"582c5211c8a8e06c0849a238","name":"Superman"},{"_id":"583bf729a9de83840ca277dc","name":"Spiderman"},{"_id":"583bf78ca9de83840ca277de","name":"Batman"},{"_id":"583bf793a9de83840ca277df","name":"Shaktiman"},{"_id":"583bfc97a9de83840ca277e0","name":"Me"}]}

and not loading the superhero.html

how to get data into html?

Upvotes: 1

Views: 485

Answers (1)

Dave Cooper
Dave Cooper

Reputation: 10714

It looks like you're trying to render this server-side. It might be a bit easier for now to render this on the client side. Once that's working, you can evaluate whether or not server-side rendering will benefit you.

You haven't provided the Angular part of your code, but you could easily hook something up in Angular to hit your API and load your results like this:

Service

angular.module('app')
  .service('myService', function($http) {
    this.getSuperheroes = function() {
      return $http.get('<path_to_api>/superhero');
    }
  });

Controller

angular.module('app')
  .controller('myController', function($scope, myService) {
    myService.getSuperheroes()
      .then(function(superheroes) {
        $scope.superheroes = superheroes;
      });
  });

Template

<table>
  <thead>
    <tr>
      <th>S.no</th>
      <th>Super hero</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="superhero in superheroes">
      <td>{{superhero.number}}</td>
      <td>{{superhero.name}}</td>
      <td>{{superhero.status}}</td>
      <td>{{superhero.action}}</td>
    </tr>
</table>

As you can see, the service provides a function to retrieve your superheroes, then you can call that service function from your controller and then display the results in your table.

You will also probably want to change your route.js to the following: 

app.get('/superhero', function(req, res) {
    return superhero.superhero_list(req,res); 
});

This way it will return the response from the DB call and not send a static file. Remember that somewhere in your Angular app, you will have to render the template (you can find out hello world examples on the Angular site) since you're not rendering it server side.

Hope that helps! Happy to answer any further queries about this :)

Upvotes: 1

Related Questions