CODEWITHSUNDEEP
htmlangularjsmongodb
Larsmanson
Larsmanson

Reputation: 413

Show MongoDB info in HTML

I'm working on a website using a MEAN stack, and now I am trying to show some MongoDB data in my HTML pages by using Angular. But I don't seem to get it done.

This is the data in MongoDB I want to show in my HTML

{    
 "badkamer" : {
    "block1" : {
        "title" : "Badkamer", 
        "content" : "string"
    }
  }
}

This is the Angular function retrieving the data:

app.controller('cityCtrl', function($scope,$http){

    $scope.specials = function(){
    $scope.special = [];

    $http.get('/specialdata').then(function(d){
    $scope.special = d.data;
      console.log(d.data);
  },function(err){
      console.log(err);
  });
 };
});

This is where I want it to show in my HTML:

<div ng-controller="cityCtrl" ng-init="specials()" ng-bind="special">
   <div class="title">{{special.badkamer.block1.title}}</div>
      <p>{{special.badkamer.block1.content}}</p>
   </div>
</div>

When i console.log(d.data), I get this:

[Object]
   0: Object
      badkamer: Object
         block1: Object
           content: "Text",
           title: "Badkamer"

But when I try it like this, the bind option shows all the data at once in my HTML. How can I get it working by using the Angular {{}} tags?

Upvotes: 0

Views: 70

Answers (1)

Anurag Awasthi
Anurag Awasthi

Reputation: 6223

From the console.log, you can see that its an array, so you will need to use index, like this,

<div ng-controller="cityCtrl" ng-init="specials()" ng-bind="special">
   <div class="title">{{special[0].badkamer.block1.title}}</div>
      <p>{{special[0].badkamer.block1.content}}</p>
   </div>
</div>

or change the code in controller.,

$scope.special = d.data[0];

Upvotes: 1

Related Questions