Tabular representation of mongodb database with express and angular

Question

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?

Dave Cooper · Accepted Answer · 2016-11-28 14:02:36Z

1

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 :)

edited Nov 28, 2016 at 14:02

answered Nov 28, 2016 at 13:05

Dave Cooper

10.7k4 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Abhishek Parikh Over a year ago

at which part the response is assigned to my front-end?

Abhishek Parikh Over a year ago

I want to ask that return res.status(200).send({ "superheros": superhero }); this line gives me static page of resoponse mensioned above. How do i import that response to angular js

Dave Cooper Over a year ago

The line $scope.superheroes = superheroes; in the controller is where you are binding the response value to the scope of your controller, which is how it gets picked up by your template. The service and controller should be in two different files (for the sake of sane project structure), but they don't have to be (technically). Your backend should just send a json response that your database returns. See expressjs.com/en/4x/api.html#res.json for an example (and documentation) for this.

Dave Cooper Over a year ago

No worries :) I've updated my answer which should hopefully help.

Dave Cooper Over a year ago

Not necessarily - that should be fine to get this working - it would be preferable to use res.json() but isn't required.

|

Collectives™ on Stack Overflow

Tabular representation of mongodb database with express and angular

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related