CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
tholo
tholo

Reputation: 541

AngularJS Doesn't Resolve An Array of Objects

I am new to Angular so please forgive me if the question is stupid.

This is my HTML:

<body data-ng-app="App">
*
*
*

<div ng-controller="Ctrl">
     <p>{{obj.desc}}</p>
</div>

*
*
*
</body>

app.js

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

controller.js

app.controller('Ctrl', [$scope, function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   }]);

I am not getting the value from key. In this case I am not receiving anything from desc, just a console error.

EDIT: I have tried everything proposed below. I did put data-ng-app in body, this is the full error I am receiving:

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3DmyApp%0AO%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A6%3A412%0Ale%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A25%3A72%0Ab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A24%3A115%0Ale%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A24%3A358%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A374%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A353%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A222%0Adb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3A246%0ABc%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359%0ABc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163%0Age%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A19%3A484%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A315%3A135%0Ab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A189%3A161%0ASf%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A37%3A31%0ARf%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A36%3A486%0A a

It's probably something small, but I've spend entire morning trying to figure it out..

EDIT 2: I have resolved this by placing controller in the same file where app is defined - app.js. When placed in separate folder it is not working. I do not know why at this point.

Upvotes: 3

Views: 144

Answers (5)

ngCoder
ngCoder

Reputation: 2105

You just made a boo boo here, a beginner mistake but not a big one.

1. Mistake

The big stack error you see in console is because of this below line where you injected scope in array in a wrong way.

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

just change it to like this app.controller('Ctrl', ['$scope', function($scope) { by simply adding it in single quotes.

This kind of dependency injection is followed while writing a better controller and this is a good practice when you want to minify your JS.

2. Mistake

$scope.obj is an array so you cant access items in it by simply doing {{obj.desc}} what you need is {{obj[0].desc}} but if you want to access all objects in the data you can use ng-repeat like below

<p ng-repeat="item in obj track by $index">

Below is the working code snippet.Hope this helps you !

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

app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.obj = [{
      intro: "intromessage",
      desc: "desc1"
    }, {
      intro: "intromessage2",
      desc: "desc2"
    }];
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body data-ng-app="App">

  <div ng-controller="Ctrl">
    <!-- If you just want to access first object -->
    <p>{{obj[0].desc}}</p>
        <!-- If you just want to access all objects -->
    <p ng-repeat="item in obj track by $index"> 
    {{item.intro}}  ---- {{item.desc}}
    
    </p>
  </div>

</body>

Upvotes: 1

georgeawg
georgeawg

Reputation: 48968

To fix the error:

   <!-- REPLACE this 
   <body data-ng-controller="App">
   -->

   <!-- WITH this -->
   <body ng-app="App">

To show the data use the ng-repeat directive

<div ng-controller="Ctrl">
  <div ng-repeat="item in obj">
     <p>{{item.intro}}</p>
     <p>{{item.desc}}</p>
  </div>
</div>

Upvotes: 1

Gary
Gary

Reputation: 2339

Seems like you have not instantiated the angular application. Hence, you are a getting a module error. Please bootstrap the application using ng-app and then provide controllers and directives of ng-repeat. If you are using ng-route then you have to add a ngRoute file apart from angularjs.min.js file. 

<html ng-app="angularjs-injection">
<head>
......
</head>
<body ng-controller="MainCtrl">
    <h1 ng-repeat="text in name">Hey! {{text.intro}} - {{text.desc}}</h1>
    <div class="changeIt"></div>
</body>

Please check the code here as an example - http://plnkr.co/edit/5RVhNcO9F81Q3WeesySu

If you still face the issue then please put a simple plunker it will help identify the actual problem.

Upvotes: 0

tanmay
tanmay

Reputation: 7911

The issue here is that you are trying to get obj.desc but obj is an array of objects. So, either you need to use ng-repeat or provide an index. Also, you were missing ng-app="appName" (usually written with body)

Here's the working example

Upvotes: 0

andre mcgruder
andre mcgruder

Reputation: 1520

You are dealing with an array of object so you have to iterate over it. So you need to do an Angular forEach loop.

<div ng-controller="Ctrl" ng-repeat="desc in obj">
     <p>{{desc}}</p>
</div>

ng-repeat

also saw this

The app should have the same capitalization as the var that you have declared when you initialized your application. Also you do not declare the scope in square brackets the way you have it. I think I fixed it below.

app.controller('Ctrl', function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   });

Upvotes: 0

Related Questions