Retrieving JSON data from API using AngularJS

Question

I'm trying to get data from a Web API and display it in a table, but it doesn't work. I am new to angularjs and i code simple program to get data from the Web API and display in table.but i am not able to get data.

Module

    var app = angular.module("myApp", []);

Service

    app.service("myService", function ($http) {
        //get All Eployee
        this.getEmployees = function () {
            return $http.get('http://apidemo.gouptechnologies.com/api/admin');
        };
    })

Controller

    app.controller("myCntrl", function ($scope, myService) {
        $scope.divEmployee = false;
        GetAllEmployee();
        function GetAllEmployee() {
            alert('home');
            var getData = myService.getEmployees();
            getData.then(function (emp) {
                $scope.employees = emp.data;
            }, function () {
                alert('Error in getting records');
            });
        }
    });

The JS code is included in the head tag of the HTML file.

HTML body

<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <ul>
            <li ng-repeat="x in employees">
                {{ x.username + ', ' + x.password }}
            </li>
        </ul>
    </div>
</body>

The API URL is legitimate. Thanks.

Yes i am getting alert message for 'Error in getting records'; — purav topiwala, Oct 06 '16 at 11:15
Then the HTTP request seems to fail. You should look at the error you are getting and the network tab of your browser's devtools. We cannot help you if we don't know what the error is. — Felix Kling, Oct 06 '16 at 11:18
The `http://apidemo.gouptechnologies.com/api/admin` is not meant to be used from the client side (using AJAX), it doesn't have the `Access-Control-Allow-Origin` header set. You should take a look at this http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — Titus, Oct 06 '16 at 11:18

score 0 · Answer 1 · answered Oct 06 '16 at 12:04

Let example a json file in "data/branchList.json" directory, And i am trying to access all data from json file using $http. It may help you to call a rest service aslo. check this example

data/branchList.json

[
  {
    "branch_id": 1,
    "branch_name": "Mummbai",
    "branch_address": "India"
  },
  {
    "branch_id": 2,
    "branch_name": "New York",
    "branch_address": "US"
  }
]

Controller

angular.module('myApp')
    .controller('myCntrl', ['$http', '$state', function ($http, $state) {

        'use strict';

        var vm = this;

        function init(){

            vm.branchs  = '';

            loadBranch();
        }
        init();

        function loadBranch(){
            $http.get('data/branchList.json').success(function(response){

                vm.branchs = response;
            })
        }
    }]);

In this example i am storing all the data in vm.branches variable, you can use this variable in html page

HTML

<li class="col-sm-6" ng-repeat = "branch in vm.branchs">

   <strong>{{branch.branch_name}}</strong>

   <span>{{branch.branch_address}}</span>
</li>

Retrieving JSON data from API using AngularJS

1 Answers1