Loading JSON Data via NG click (JS)

Question

I am having a problem loading a set of JSON data with NG CLICK. Without the clickButton function the data loads fine. Is my JSON data structured properly? Here is my fiddle. Click [here] (http://jsfiddle.net/al321/08rjqv4k/3/ "mouse over")

    $scope.items = [
    {
    "Name":"Sam",

    "Address":"Street",

    "Phone":"111",

    "status":"Available"

    }, 

    {
    "Name":"Tom",

    "Address":"Road",

    "Phone":"222",

    "status":"Busy"

    },]

   --js
   var app = angular.module('myApp', []);

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

   $scope.clickButton = function() {
   $http.get('data.json').success(function(data) {
    $scope.items = data.items;
  });
  }

   }]);

camden_kid · Accepted Answer · 2015-04-18 20:49:01Z

Plunker

JS

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http', function($scope, $http) {
  $scope.clickButton = function() {
    $http.get('data.json').success(function(data) {
        $scope.items = data;
      });
  }

}]);

Markup

  <body ng-controller="myController">
     <div ng-app="myApp">
        <div ng-controller="myController">
          <button ng-click='clickButton()'>Load Data</button>
          <ul ng-repeat="item in items">
            <li ng-repeat="(key, val) in item">{{key}}: {{val}}
            </li>
        </ul>
        </div>
    </div>
  </body>

JSON

[
  {
        "Name":"Sam",

        "Address":"Street",

        "Phone":"111",

        "status":"Available"

    }, 

    {
        "Name":"Tom",

        "Address":"Road",

        "Phone":"222",

        "status":"Busy"

    }
]

tpie · Accepted Answer · 2015-04-19 03:13:38Z

0

Is this what you are trying to accomplish?

Just replace the contents of the clickButton() function with your ajax calls.

You forgot to put the () on ng-click="clickButton(). You need to actually call the function.

Plunker

To add the search functionality you mentioned in the comment, just add a filter to the first ng-repeat:

ng-repeat="item in items| filter: {Name: search}"

Plunker with search

edited Apr 19, 2015 at 3:13

answered Apr 18, 2015 at 20:37

tpie

6,2393 gold badges24 silver badges41 bronze badges

1 Comment

Angular_Newbie Over a year ago

Yes it is. Thanks. I will now attempt to use ng model(search) and tie that to the data. For example: Type Sam in a form, click search and it finds all Sam Json data.

Collectives™ on Stack Overflow

Loading JSON Data via NG click (JS)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related