Search Posts

node js returned json results are not showing in angular js

Iam using Node js(8.9.4) as backend server, angular js(1.6.4) as frontend, DB is MySQL 5.6.
From home page when i click generatereport button iam calling the nodejs
URL to get the values from DB and forward the results to vendorcompliances.html.
Iam getting values from DB and even in the console but it is not showing in html file.
I didnt see any error in the console or node js logs.

I have searched in google but iam not able to get it fixed.
any help is highly appreciated.Please let me know if you need any further details.

home.html

    <div ng-controller="homeCtrl">
<form>
<fieldset>
    <div>
    &nbsp;<br>
    &nbsp;<br>
    </div>
    <div>
        <table cellpadding="2" cellspacing="2" border="0">
        <tr></tr>       
        <tr>
        <td><input type="button" ng-click="generatereport()" value="Generate Employee Report"/><br/><br/></td>
        <tr>
        <tr></tr>
        </table> 
    </div>
</fieldset>
</form>
</div>

app.js

    /**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , mysql = require('mysql')
  , bodyParser = require('body-parser')
  , html = require('html');

//LOGGER
var log4js = require('log4js');
var log = log4js.getLogger("server");


var app = express();
app.set('port', process.env.PORT || 8080);
app.set('view engine', 'html');
app.set('views',path.join(__dirname + '/views'));
app.use(bodyParser.json()); // Body parser use JSON data
var urlencodedParser = bodyParser.urlencoded({ extended: true });
app.use(express.static(path.join(__dirname, 'public')));

var pool = mysql.createPool({
    connectionLimit : 25,
    host     : 'localhost',
    user     : 'root',
    password : 'root',
    database : 'invoicedb', 
    port :'3306'
});

log.debug('Server is starting....');

//TEST CONNECTION
pool.getConnection(function (err, connection) {
    if (!err) {
        console.log("Database is connected ... ");
        log.info('Database is connected ... ');
    } else {
        console.log("Error connecting database ... ");
        log.error('Error connecting database ... ');        
        connection.release();
    }
    console.log("releasing connection ... ");
});

app.get("/", function (req, res) {
    res.sendFile('index.html', { root: path.join(__dirname, './public') });
});

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      res.setHeader('Content-Type', 'application/json');
      next();
    });

app.get('/rest/vendordetails',urlencodedParser, function(req, res, next)  {
        pool.getConnection(function (err, connection) {
        connection.query('SELECT * from invoicedb.vendor', function (err, result) {
            if (err) {
                console.error(err);
                return res.send(err);
            } else {
                 return res.send(result);               
            }   

        });

    });
});

controller.js

    var myapp = angular.module('myloginapp',['ngRoute']);

myapp.config(function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix('');   
    $routeProvider
        .when('/', {
            templateUrl: 'login.html',
            controller: 'loginCtrl'
        })
        .when('/home', {
            resolve : {
                "check": function($location, $rootScope) {
                 if(!$rootScope.loggedIn) {      
                    $location.path('/');
                 }
                }           
            },
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })      
        .when('/vendorcomplainces', {
            resolve : {
                "check": function($location, $rootScope) {
                 if(!$rootScope.loggedIn) {      
                    $location.path('/');
                 }
                }           
            },
            templateUrl: 'vendorcomplainces.html',
            controller: 'vendordetailsCtrl'
        })
        .otherwise({
            redirectTo:'/'
        });
});


myapp.controller('homeCtrl',function($scope, $http, $location, $routeParams, $rootScope) {

    $scope.generatereport = function() 
    {
        $location.path('/vendorcomplainces');

    }
});

myapp.controller('vendordetailsCtrl',function($scope, $http, $location, $routeParams,$rootScope) {

        console.log("inside generatereport--click");
        var baseURL = 'http://localhost:8080/rest/vendordetails';
        console.log(baseURL);
        $http({url:baseURL, method:'GET'}).then(function(response) {
            console.log("vendordetails- data--",response.data); 
            $scope.vendorsResult = response.data;   
            $scope.$apply;
            console.log("vendorsResult--",$scope.vendorsResult);
        });
    }
});

vendorcomplainces.html

    <div ng-controller="vendordetailsCtrl">
    <fieldset>
    <h2 align="center"><b style="background-color: pink">VENDOR MONTHLY COMPLAINCES FORMAT</b></h2>

    <div>
         <div>
            <table style="float: left; width:50%;" border="2">
              <tr>
              <th bgcolor="orange">Name and Address of the vendor</th>
              <th bgcolor="lightgreen">Name of the Principle Employer & Address</th>
              </tr>
              <tr style="height: 68px">
              <th>{{vendorsResult[0].vendorName}} <br/>{{vendorsResult[0].vendorAddress}}</th>
              <th>{{vendorsResult[0].emplrName}} <br/>{{vendorsResult[0].emplrAddress}}</th>
            </table>
            <table style="display: inline-block;width:auto;" border="2">
                    <tr>
                      <td bgcolor="pink">Month</td>
                      <td>{{vendorsResult[0].month}}</td>
                    </tr> 
                    <tr>
                      <td></td>
                    </tr>
                    <tr>
                      <td bgcolor="yellow">ESIC.Reg.No.</td>
                      <td>{{vendorsResult[0].esicRegNo}}</td>
                    </tr> 
                    <tr>
                      <td bgcolor="orange">EPF.Reg.No.</td>
                      <td>{{vendorsResult[0].epfRegNo}}</td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr> 
                    <tr>
                      <td bgcolor="pink">Professional Tax. Reg.No</td>
                      <td>{{vendorsResult[0].profTaxRegNo}}</td>
                    </tr>
            </table>
        </div>
             <div>
             &nbsp;&nbsp;
             </div>
                <table cellpadding="2" cellspacing="2" border="1">

                        <col>
                        <colgroup span="31"></colgroup>

                        <tr bgcolor="yellow">
                            <th>SL No.</th>
                            <th>Name of the employee</th>
                            <th>Father's Name</th>                                                              
                        </tr>

                 <tbody>
                    <tr ng-repeat="vendor in vendorsResult">
                         <td>{{vendor.slNo}}</td>       
                         <td>{{vendor.fName}}&nbsp;{{vendor.lName}}</td>                                     
                         <td>{{vendor.fatherName}}</td                       
                    </tr>               
                    </tbody>
                </table>
            </div>
        </div>
    </fieldset>
    <div>
    &nbsp;
    </div>
</div>  

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.