CODEWITHSUNDEEP
phpangularjsjson
redeemefy
redeemefy

Reputation: 4849

AngularJS problems with $http GET

I built web service with php that reads a database and echo json. I go to the path to see the result and the result is success. Here an example of my web service.

[{"id":"1","skill":"1","src":"walmart","total":"1"},{"id":"1","skill":"1","src":"target","total":"2"}]

Here is my app.js code

(function () {
'use strict';
var app =   angular.module('myApp', ['angular.filter']);
// Declare app level module which depends on views, and components
app.controller('DeveloperTable', function ($scope, $http) {
        var vm = this;

        // GET request example:
        $http({
            method: 'GET',
            url: '../_includes/web_service_person.php'
        }).then(function successCallback(data) {
            vm.developer = data;
        }, function errorCallback(data) {
            console.log(":(");
        });
    });

})();

Here is my index.html

<div ng-controller="DeveloperTable">
    <h4>Developer Assesment</h4>
    <table class="table">
        <tr>
          <th>pid</th>
          <th ng-repeat="(skill, value) in developer | groupBy: 'skill'">
            {{skill}}
          </th>
        </tr>

The funny part is that I don't have errors in my console, but I'm not getting data either. What I'm missing here?

Edit: The groupBy filter comes from the angular-filter library

Upvotes: 1

Views: 33

Answers (2)

mikeb
mikeb

Reputation: 11287

Couple of things:

You need to do $scope.developer = ... in your code, vm.developer is not in your scope on the page.

That aside, you can:

Open Firebug in your browser, go to the network tab and look at the HTTP request to your web service. You can see if it returns data. If it does, debug it like:

Look at your HTML, and add <pre>{{developer | json}}</pre> and I think you'll see that it's empty.

Upvotes: 1

plong0
plong0

Reputation: 2188

The ng-repeat syntax is: ng-repeat="(key, value) in myObj". Based on the json you posted, vm.developer is an array, so skill would be set as the array index.

I am also not so sure about that groupBy: 'did', because I don't see any did property in your json objects.

Try it like:

<th ng-repeat="data in vm.developer | groupBy: 'id'">
    {{data.skill}}
</th>

Upvotes: 1

Related Questions