CODEWITHSUNDEEP
javascriptangularjs
Kumaranath Fernado
Kumaranath Fernado

Reputation: 180

$http service angular not working

I'm utilising Angular's $http service in controller to make an HTTP request to web server to fetch the data in the app/phones/phones.json file.But the list of phones will not get displayed via index.html.

app/js/controllers.js:

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

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });
  $scope.orderProp = 'age';
 }]);

/////////// index.html:

<html  ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
    <meta charset="utf-8">
    <title>Google Phone Gallery:{{query}}</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="bower_components/angular/angular.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body >
    <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">
                <!--Body content-->
                <ul class="phones">
                    <li ng-repeat="phone in phones| filter:query|orderBy:orderProp">
                        <span> {{phone.name}} </span>
                        <p>{{phone.snippet}}</p>
                    </li>
                </ul>
            </div>
        </div>  

    </div>


    <div style="padding:100px">
    Additional
    <p> Total number of phones:{{phones.length}}</p>
    <p>Hello,{{name}}!</p>

    <table>
        <tr><th>row number</th></tr>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td></tr> 

    </table>

    </div>
</body>
</html>

///////////////////////

here's the json file:

[
{
    "age": 0, 
    "id": "motorola-xoom-with-wi-fi", 
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
    "name": "Motorola XOOM\u2122 with Wi-Fi", 
    "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
}, 
{
    "age": 1, 
    "id": "motorola-xoom", 
    "imageUrl": "img/phones/motorola-xoom.0.jpg", 
    "name": "MOTOROLA XOOM\u2122", 
    "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}, 
{
    "age": 2, 
    "carrier": "AT&T", 
    "id": "motorola-atrix-4g", 
    "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
    "name": "MOTOROLA ATRIX\u2122 4G", 
    "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
}, 
{
    "age": 3, 
    "id": "dell-streak-7", 
    "imageUrl": "img/phones/dell-streak-7.0.jpg", 
    "name": "Dell Streak 7", 
    "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
}]

Upvotes: 0

Views: 143

Answers (2)

sylwester
sylwester

Reputation: 16498

Please see here http://plnkr.co/edit/17K7bH7IQ1RgwY6JZMiN?p=preview

change you get call to which allows you to see why $get is not working

$http.get('phones.json').then(function(response) {
    $scope.phones = response.data;
  },
  //failed $get call
  function(a, b, c) {
    alert("can't get data")
    console.log(a);
    console.log(b);
    console.log(c);
  });

Upvotes: 1

Sinan Mujan
Sinan Mujan

Reputation: 53

Your problem could be that you have to allow loading of json files in your web.config:

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

I've had a similar problem and solved it with this. Hope it helps. :)

Upvotes: 1

Related Questions