'How to display mongodb data directly in angularjs?

I have a problem when I am trying to display mongodb data directly from a collection to a page that uses angularjs. When I try it the actual data just won't be visible in the page. As for the server I am using nodejs + express.

Mongodb schema: sample.js

const mongoose = require('mongoose');

const sample = new mongoose.Schema({
title: {
type: String
},
description: {
type: String
},
published: {
type: Boolean
}
},{ collection : 'sample' });


module.exports = mongoose.model('sample', sample);

Index.js:

router.get('/home', function(req, res) {
sample.find({}, function (error, infos) {
if (error) console.log(error)
console.log(infos)
res.render('home', {infos})
})
})

When I console log the infos here the correct data is beign displayed.

controller.js

var mainApp = angular.module("mainApp", []);
                        
mainApp.controller('test', function($scope, $http) {
  $scope.controllerName = "test"
  $http.get('/home').then(function(data) {
   console.log(data);
   $scope.infos= data;

 })
});

When I check the console in the browser that console.logs (data) I see this:

Home.html:

<html>
                    
    <head>
       <title>Angular</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
       <script src="/static/js/controller.js"></script>
    
    </head>
    
    <body ng-app="mainApp">

<div ng-controller="test">

   {{ infos.title }}

</div>       
    </body>
    </html>

When I try using {{ infos.title }} or {{infos}} both will remain empty.

So my question is how can I make this data visible in the frontend aswell with angular? I am still quite new to angular is there anything that I am missing or doing wrong here?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to display mongodb data directly in angularjs?

Sources

Related Questions