Angular JS object not binding into view

Question

Here is a simple controller

I am creating a hardcoded object in the controller and want to bind it in the view, why I am doing this is right now I want to work representation of data of this kind.

I can't work on it because dataObject properties wont display on view

 var app=angular.module('NOL',[]);

app.controller('MainController',['$scope',function($scope){

$scope.databOject = { 
    venue:'Hauz Khas Social',
    date:'23-July-2015',
    data:{
        Point1 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point2 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point3 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        },
        Point4 :{
            people:100,
            females:40,
            music:'EDM',
            musicSrc:'DJ',
            vibe:'upbeat',
            imgUrl:'',
            timeStamp:'',
            coordinates:{Lon:'',Lat:''}
        }
    }
}

} 

}]);

Here is neat looking HTML

  <!Doctype html>
  <html ng-app="NOL">
  <head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <script src="app.js"></script>

  </head>

  <body class="container" ng-controller="MainController">
      {{dataObject|json}}

      <div class="row">
          <h4>Venue:{{ dataObject.venue }} </h4>
          <h4>Date:{{ dataObject.date }}</h4>

          <input type="text" ng-model="text"> {{text}}

      </div>

  </body>
  </html>

Still the data won't bind

here is a working plunker solution plnkr.co/edit/ZK7SHvOXmSAmi8PhgYEk?p=preview. — Sachila Ranawaka
– Sachila Ranawaka, Commented Jul 22, 2016 at 6:25

Suren Srapyan · Accepted Answer · 2016-07-22 06:13:56Z

2

To see what is wrong use F12 in the browser and you will see that

cannot read the property of undefined. dataObject is undefined.

Your variable is $scope.databOject, but you are using like dataObject. Extra b in the $scope.databObject

 <body class="container" ng-controller="MainController">
      {{dataObject|json}}

      <div class="row">
          <h4>Venue:{{ dataObject.venue }} </h4>
          <h4>Date:{{ dataObject.date }}</h4>

          <input type="text" ng-model="text"> {{text}}

      </div>

  </body>

answered Jul 22, 2016 at 6:13

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Collectives™ on Stack Overflow

Angular JS object not binding into view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related