Getting details from the json file using AngularJS using search input

Question

My Goal:
I want to search for the member details on input of the member id.

What i have don't till now?:
My view is ready.I have create a service named myService which use $http service to grab data from the members.json file.

My Problem?
Instead getting the details of the particular id searched, I am getting names of all members

What is want to ask?
Who to get only the details of the searched member using his id.

  This is my view
  [1]: https://i.sstatic.net/PQ0BP.jpg
  This is my code
  [1]: https://i.sstatic.net/Q9tZp.jpg
  This is my json file
   {
    "member":[
    {   "Id":"1",
        "Name":"Amit Singh",
        "Dateofjoin":"21-03-2003",
        "Number":"934234334"
    },{
        "Id":"2",
        "Name":"Mohamad Aamir",
        "Dateofjoin":"21-03-2012",
        "Number":"934343434"
    }
   ]
  }




 <body ng-app="myApp" ng-controller="ctrl">
 <div>
 <form class="form-horizontal">
    <h2>Search for members.</h2>
    <input type="text" name="" class='form-control' placeholder="Member ID" 
     ng-model="searchId"/><br>
    <button class="btn btn-primary" ng-click="doSearch()">Search</button>
    </form>
    <div>   
    <p ng-repeat="x in data">
        {{x.Name}}
    </p>
    </div>


  </div>
 </body>
 <script type="text/javascript">
    var app = angular.module("myApp",[]);

    app.controller('ctrl',
    ['$scope','myService','$log',function($scope,myService,$log){
        $scope.doSearch = function(){
             myService.getData($scope.searchId).then(function(data){
                $scope.data = data;
                $log.info($scope.data);
                }); 
            };
        }])
    app.service('myService', ['$http','$log', function($http,$log){
        this.getData = function(memberId){
            return $http({
                url:"members.json",
                method:"GET",
                dataType: 'json',
                contentType: "application/json"

            }).then(function(response){
                var myData = response.data.member;
                return(myData);
            },function(response){
                throw response;
            });
        }
    }]);

    </script>

The relevant code must be in the question, as text. Not as a URL to an image. — JB Nizet
– JB Nizet, Commented Sep 24, 2017 at 18:06
Your service returns response.data.member, which is the array of all members. It doesn't do anything with the memberId that is passed as argument. So... why do you think this service should return only one member, idendified by the memberId? Why don't you change your code to look for the member identified by memberId, and returns that instead of the whole array? You need a loop. Or a call to Array.filter(). — JB Nizet
– JB Nizet, Commented Sep 24, 2017 at 18:12
I know that it returns an array.I just wanted to know the different methods possible to do so. Thankyou btw :) — Amit Phartiyal
– Amit Phartiyal, Commented Sep 24, 2017 at 18:18
If all you have on the server is a static json file, the only possible way is to loop through the array and find the element that has the given ID. What else could you possibly do? — JB Nizet
– JB Nizet, Commented Sep 24, 2017 at 18:21
See data coming from function response using console.log(myData); .See it contains the details or not. @AmitPhartiyal — Shifat
– Shifat, Commented Sep 24, 2017 at 18:24

pegla · Accepted Answer · 2017-09-24 18:23:46Z

1

Sorry I misunderstood the question here's the right answer:

app.service('myService', ['$http','$log', function($http,$log){
        this.getData = function(memberId){
            return $http({
                url:"members.json",
                method:"GET",
                dataType: 'json',
                contentType: "application/json"

            }).then(function(response){
                var myData = response.data.member.filter(member=>member.Id==memberId)[0];
                return(myData);
            },function(response){
                throw response;
            });
        }
    }]);

edited Sep 24, 2017 at 18:23

answered Sep 24, 2017 at 18:16

pegla

1,8864 gold badges19 silver badges20 bronze badges

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

Comments

Kunvar Singh · Accepted Answer · 2017-09-24 18:54:08Z

0

You may try for this:

  angular.module('TableFilterApp', [])
    .controller('TableFilterController', function($scope) {
      $scope.planets = [
        {
          name : 'Mercury',
          distance : 0.4,
          mass : 0.055
        },
        {
          name : 'Venus',
          distance : 0.7,
          mass : 0.815
        },
        {
          name : 'Earth',
          distance: 1,
          mass : 1
        },
        {
          name : 'Mars',
          distance : 1.5,
          mass : 0.107
        },
        {
          name : 'Ceres',
          distance : 2.77,
          mass :     0.00015
        },
        {
          name : 'Jupiter',
          distance : 5.2,
          mass :   318
        },
        {
          name : 'Saturn',
          distance : 9.5,
          mass :    95
        },
        {
          name : 'Uranus',
          distance : 19.6,
          mass :   14
        },
        {
          name : 'Neptune',
          distance : 30,
          mass : 17
        },
        {
          name : 'Pluto',
          distance : 39,
          mass : 0.00218
        },
        {
          name : 'Charon',
          distance : 39,
          mass :  0.000254
        }
      ];
    
    });

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <title>Table Filter</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
<body ng-app="TableFilterApp" ng-controller="TableFilterController">
 
<table>
<tr><th>Name</th><th>Average Distance</th><th>Mass</th></tr>
<tr><td><input ng-model="f.name"></td><td><input ng-model="f.distance"></td></td><td><input ng-model="f.mass"></td></tr>
<tr ng-repeat="p in planets | filter:f"><td>{{p.name}}</td><td>{{p.distance}}</td><td>{{p.mass}}</td></tr>
</table>
</body>
</html>

answered Sep 24, 2017 at 18:54

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

2 Comments

Kunvar Singh Over a year ago

@Here we use | filter for filtering the data in a table, but in your case we are finding data in li, use filter with ng-repeat but it shoulf be insure that from model, And here we have dummy data, instead of getting it from angular services

Kunvar Singh Over a year ago

code-maven.com/try/examples/angular/angular_table_filter_1.html

Collectives™ on Stack Overflow

Getting details from the json file using AngularJS using search input

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related