AngularJS problems with $http GET

Question

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

ng-controller="DeveloperTable as vm" and then iterate vm.developer — vp_arth
– vp_arth, Commented Sep 1, 2016 at 17:06

plong0 · Accepted Answer · 2016-09-01 16:44:25Z

1

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>

answered Sep 1, 2016 at 16:44

plong0

2,1891 gold badge19 silver badges19 bronze badges

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

3 Comments

redeemefy Over a year ago

I'm using this dependency therefore the syntax si slightly different.

redeemefy Over a year ago

GroupBy: 'did' was a typo. I update my question. Thank you for letting me know.

plong0 Over a year ago

haha, well dependencies like that should definitely be mentioned in the original question.

mikeb · Accepted Answer · 2016-09-01 16:46:43Z

1

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.

answered Sep 1, 2016 at 16:46

mikeb

11.5k9 gold badges73 silver badges135 bronze badges

3 Comments

plong0 Over a year ago

Either $scope.developer = ...; to not expose entire controller on scope. OR ng-controller="DeveloperTable as vm" to expose controller on scope as vm

redeemefy Over a year ago

I did both, <pre>{{developer | json}}</pre> and opened the dev tools, network, response and my json object is there.

plong0 Over a year ago

so the <pre>{{developer | json}}</pre> is rendering your object now? how about <pre>{{developer | groupBy: 'skill' | json}}</pre> ?

Collectives™ on Stack Overflow

AngularJS problems with $http GET

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related