CODEWITHSUNDEEP
angularjs
Shoaib Ud-Din
Shoaib Ud-Din

Reputation: 4714

Angular http get call

Angular http get call not working but without http dumping JSON its working fine. Any thoughts?

Data:

{
       "makes": [
          {
             "id": 200347864,
             "name": "AM General",
             "niceName": "am-general"
          },
{
             "id": 200347800,
             "name": "Toyota",
             "niceName": "toyota"
          }
            ]
        }


<body ng-controller="MakeListCtrl">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <!--Sidebar content-->
                    Search: <input ng-model="query">
                    Sort by:
                    <select ng-model="orderProp">
                      <option value="name">Alphabetical</option>
                      <option value="age">Newest</option>
                    </select>
                </div>
                <div class="col-md-10">
                    <ul class="phones">
                        <li ng-repeat="maker in makes">
                            <ul>
                                <li ng-repeat="make in maker.makes | filter:query | orderBy:orderProp">
                                    <p>{{make.name}}</p>
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </body>


var phonecatApp = angular.module('phonecatApp', []);
    phonecatApp.controller('MakeListCtrl', ['$scope', '$http',
      function ($scope, $http) {
        $http.get('phones/phones.json').success(function(data) {
          $scope.makes = data;
          console.log(data);
        });

        $scope.orderProp = 'age';
      }]);

Upvotes: 1

Views: 358

Answers (1)

Arun AK
Arun AK

Reputation: 4370

Actually your controller itself is working fine. Its because of your ng-repeat code. I just made some modification and it works

<div class="col-md-10">
  <ul class="phones">
    <li ng-repeat="maker in makes.makes | filter:query | orderBy:orderProp">
         <p>{{maker.name}}</p>
    </li>
  </ul>
</div>

Here is the working Link

Upvotes: 3

Related Questions