Error with AngularJS

Question

I am new to AngularJS and here I am facing an issue. I have a page with submit button, when i click on submit modal has to open and the data from URL has to be present inside modal. Right now, modal opens but that is empty and not fetching data from URL.Below is the code I have:

Index.html:

<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Modal</h3>
</div>
        <div class="modal-body">
            {{items}}
        </div>
<div class="modal-footer">
  <button class="btn btn-warning" ng-click="cancel()">Close</button>
 </div>
 </script>
    <button class="btn" ng-click="open()">Submit</button>
</div>
</body>
</html>

example.js:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {


 //$scope.items = ['item1', 'item2', 'item3'];

$scope.open = function () {
    debugger
    $http.get("URL")
      .success(function (response) {
          debugger
          $scope.items = response.data.Table;
          console.log(response.Table);
      });
          var modalInstance = $modal.open({
              templateUrl: 'myModalContent.html',
              controller: 'ModalInstanceCtrl',
              resolve: {
                  items: function () {
                      return $scope.items;
                  }
              }
          });        
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
};

Errors Iam getting after clicking on submit is:

Failed to load resource: the server responded with a status of 404 (Not Found)

Failed to load resource: the server responded (url I am using for local host) with a status of 405 (Method Not Allowed)

Here is a demo plunker

Where is this going wrong? Hope anyone can help. Thanks in advance!!

You could see what the URL is returning from the rest client on chrome or Postman. Modal seems to be working fine. — Sajal
– Sajal, Commented May 25, 2016 at 5:50
@Dev-One: yup URL is working fine in browser. But the data is not fetched inside the modal and even with console.log(), i couldn't see any object on console. — Deborah
– Deborah, Commented May 25, 2016 at 5:53

Nifal Nizar · Accepted Answer · 2016-05-25 07:01:13Z

1

I updated your code little bit...
Now its working fine

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {

    $scope.open = function () {
        $http.get("http://jsonplaceholder.typicode.com/posts")
          .success(function (response) {
              var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                      items: function () {
                          return response;
                      }
                  }

              });
          });


    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

Issue was the return in the resolve function.now its fine.
Another thing, your results are set of data in an array. so you have to loop it.

answered May 25, 2016 at 7:01

Nifal Nizar

9631 gold badge9 silver badges17 bronze badges

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

10 Comments

Deborah Over a year ago

This is fine with the sample url, but in the original url i have JSON data as:{"Table":[{"......"}]}. So i have update code in resolve as resolve: { items: function () { $scope.items = response.data.Table;return $scope.items; } . Is this correct?

Nifal Nizar Over a year ago

No need to assign "$scope.items = response.data.Table;" just return "response.data.Table;"

Nifal Nizar Over a year ago

can you get me the plunker

Nifal Nizar Over a year ago

try something like this "return response.Table"

Deborah Over a year ago

{"Table":[{"ID":"01","Name":"John"},{"ID":"02","Name":"Jerry"}}]}

|

Tech Savvy · Accepted Answer · 2016-05-25 05:55:47Z

0

As it is ajax call and modalInstance open method is outside of ajax call success method, it may or may not return data.

modalInstance logic seems to be working fine. As Dev-One suggested check you rest service, if it is returning data or not.

Please refer to this working plunkr with some sample data

http://plnkr.co/edit/tH97V6m54P7TFZzcS8CA

$http.get("http://jsonplaceholder.typicode.com/posts").success(function (response) {
              debugger
              $scope.items = response;
              console.log(response);
               var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                      items: function () {
                          return $scope.items;
                      }
                  }

              });
          });

answered May 25, 2016 at 5:55

Tech Savvy

9310 bronze badges

1 Comment

Deborah Over a year ago

Tried with $http.get("jsonplaceholder.typicode.com/posts").success(function (response) {, now the error on console is:` Cannot read property 'Table' of undefined`

Nifal Nizar · Accepted Answer · 2016-05-25 05:58:10Z

0

In the call method
$http.get("URL")
I don't see a correct url. because you have specified the url as "url". it should be something like "localhost:8000/GetItems"

And make sure you open the model in the success method.
Otherwise you model won't get the data.

answered May 25, 2016 at 5:58

Nifal Nizar

9631 gold badge9 silver badges17 bronze badges

8 Comments

Deborah Over a year ago

I have mentioned it here as "URL", but have tried with the original one.

Nifal Nizar Over a year ago

are you getting anything inside the success method?

Deborah Over a year ago

No couldn't find anything in success. Please check the plunk: plnkr.co/edit/tH97V6m54P7TFZzcS8CA?p=preview with url updated in httpget()

Nifal Nizar Over a year ago

I tried your get a method with below codes and im getting the results.

Nifal Nizar Over a year ago

<html> <head> <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.8/…> </head> <body ng-app="myApp" ng-controller="myCtrl"> <button class="btn" ng-click="open()">Submit</button> </body> <script> var angular = angular.module('myApp', []); angular.controller('myCtrl', function($scope,$http) { $scope.open = function () { $http.get("jsonplaceholder.typicode.com/posts") .success(function (response) { $scope.items = response.data.Table;; }); }; }); </script> </html>

|

Collectives™ on Stack Overflow

Error with AngularJS

3 Answers 3

10 Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related