CODEWITHSUNDEEP
angularjsjson
Bhishma
Bhishma

Reputation: 21

How to get data from JSON using Angularjs?

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

app.controller('emp', ['$scope', 'empService', function($scope, empService){
    $scope.doSearch = function(){
        empService.findEmployeeById($scope.searchempno, function(r){
            $scope.empno = r.empno;
            $scope.ename = r.ename;
            $scope.salary = r.salary;
            $scope.dptno = r.dptno;
        });
    };
}]);

app.service('empService', ['$http', '$log', function($http, $log){
    this.findEmployeeById = function(empno, cb){
        $http({
            url: 'employees.json' + empno,
            method: 'GET'
        }).then(function(resp){
            cb(resp.data);
        });
    };
}]);
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="emp">
            <form class="form-inline">
                <div class="form-group">
                    <label>Enter Employee Number:</label>
                    <input type="text" class="form-control" ng-model="searchEmpno"/>
                </div>
                <button class="btn btn-primary" ng-click="doSearch()">Search</button>
            </form>
            <hr>
            <div class="row">
                <div class="col-sm-2">Employee No</div>
                <div class="col-sm-2">{{empno}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Employee Name</div>
                <div class="col-sm-2">{{ename}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Salary</div>
                <div class="col-sm-2">{{salary}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Deptno</div>
                <div class="col-sm-2">{{dptno}}</div>
            </div>
        </div>
    </body>
</html>

If I gave the number in input field like 1001 and click the search button. It will not show the details. I have checked the console, there is no error. My JSON file has been placed the same location of the HTML file.

Thanks, SamBhishma

Upvotes: 2

Views: 109

Answers (2)

clever_bassi
clever_bassi

Reputation: 2480

I have created an updated plunker here. First issue was what I mentioned in the comment. In your view, you are writing <input type="text" class="form-control" ng-model="searchEmpno"/>and in your controller, you're trying to access this variable as searchempno

Second issue is in your http request. You cannot pick and choose the data from json file based on the id. You have to get the entire JSON file, parse it and filter out the value if it matches your searchEmpno model value. I fixed it in the plunker.

Third issue, you are attaching plain values to your scope like $scope.empno , $scope.ename. Instead, you need to put such values into an object, so in your controller, put the matched employee object in the scope and in your view, reference it as {{obj.ename}} and so on.

Another thing, no need to return callbacks inside then. The clean way of handling successful, failed http calls is:

$http.get('url').then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

Read more about them here.

Take a look at the updated plunker to see if it matches your needs.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222532

Problem is your model variable is wrong inside the view, try this

<input type="text" class="form-control" ng-model="searchEmpno"/>

DEMO

Upvotes: 0

Related Questions