how to display data after form submit using expressjs

Question

**app.js** Code
app.get('/', function (req, res) {
        res.render('index', {
            data: docsData,
            title: "EJS example",
            header: "Some users"
        });
});
app.post('/', function (req, res) {
    var jname= req.body.firstname;
    var lname= req.body.lastname;
    var jemail= req.body.email;

    var collection = dbConnect.collection('users');
    var document={name:jname, lastname:lname, email:jemail};
    collection.insert(document, {w: 1}, function(err, records){
        console.log("Record added as "+records[0]._id);
    });

    dbConnect.collection("users").find({"name":jname}).toArray(function(err, docsData) {
        console.log('checking error',err, docsData);
        res.render('index', {
            data: docsData,
            title: "AJT Family",
            header: "Some users"
        });
    });
});



**html code**

<div align="center" ng-controller="FormCtrl">
    <form name="form" ng-submit="submitForm()" novalidate>
        <table>
            <tr><td>Name:</td>
                <td>
                    <input id="firstname" type="text" ng-model="regform.firstname" name="firstname" required="" />
                </td>
                <td>
                    <div ng-show="form.$submitted || form.firstname.$touched">
                        <div ng-show="form.firstname.$error.required">Enter your name.</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td>
                    <input id="lastname" name="lastname" type="text" ng-model="regform.lastname" required>
                </td>
                <td>
                    <div ng-show="form.$submitted || form.lastname.$touched">
                        <div ng-show="form.lastname.$error.required">Enter your Last name.</div>
                    </div>
                </td>
            </tr>

            <tr>
                <td>E-mail:</td>
                <td><input id="email" type="email" ng-model="regform.email" name="uEmail" required="" /></td>
                <td>
                    <div ng-show="form.$submitted || form.uEmail.$touched">
                        <span ng-show="form.uEmail.$error.required">Enter your email.</span>
                        <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
                    </div>
                </td>
            </tr>
</table>
       <input type="button" ng-click="reset(form)" value="Reset" />
        <input type="submit" ng-disabled="!form.$valid"  value="Save" />
        <p id="hu"></p>
    </form>
</div>
<%if(data) {%>
    <h1>Users</h1>
    <% data.forEach(function(user){ %>
    <br>
    <table>
        <tr><td>Name: </td><td><%= user.name %> <%= user.lastname %></td></tr>
        <tr><td>Email: </td><td><%= user.email %></td></tr>
    </table>
    <% }) %>
<% } %>
</body>
</html>


**javascript**
var result;
        var app = angular.module('formExample', []);
        app.controller('FormCtrl', function ($scope, $http) {
            $scope.data = {};
            $scope.submitForm = function() {
                formData = $scope.regform;
                console.log("posting data....");
                var request = $http({ url: '/',data: $scope.regform, method: 'post' });

                console.log(formData);
            };
        });

here I can save data on mongodb using expressjs. I need to display data after form submission. Here nothing is displaying after form submission. How to display that saved content in html using embedded Javascript.

Answer 1

What you'll want to do is change your res.render() call to do something like this:

res.render('index', {
  data: docsData,
  title: 'AJT Family',
  header: 'Some Users',
  body: req.body,  // This is your form data as a JSON object.
});

Then, in your index template, you'll have access to your form data to display however you want, if you're using Jade, for instance, you might want to say like:

h1 Data!
p #{body}