Angular http get call

Question

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';
      }]);

Did console is showing any error?

BKM
– BKM

2015-09-09 06:01:31 +00:00
Commented Sep 9, 2015 at 6:01 — BKM
– BKM, Commented Sep 9, 2015 at 6:01
No errors but I can see data in console.log

Shoaib Ud-Din
– Shoaib Ud-Din

2015-09-09 13:06:22 +00:00
Commented Sep 9, 2015 at 13:06 — Shoaib Ud-Din
– Shoaib Ud-Din, Commented Sep 9, 2015 at 13:06

Arun AK · Accepted Answer · 2015-09-09 13:40:48Z

3

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

edited Sep 9, 2015 at 13:40

answered Sep 9, 2015 at 6:07

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

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

3 Comments

Arun AK Over a year ago

can you provide the data ?

Arun AK Over a year ago

I have updated the answer and the link. Now it will work for your given data. Please check it

Shoaib Ud-Din Over a year ago

Your code is expecting array because its start with [. But my data starts with {. Still not working.

Collectives™ on Stack Overflow

Angular http get call

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related