検索入力を使用してAngularJSを使用してjsonファイルから詳細を取得

私の目標：
メンバーIDの入力時にメンバーの詳細を検索したいと思います。

私は今まで何をしていませんか？：
私のビューは準備ができています。$ http サービスを使用してmembers.jsonファイルからデータを取得するmyServiceという名前のサービスを作成しました。

私の問題？
検索された特定のIDの詳細を取得する代わりに、私は全員の名前を取得しています

何をお求めですか？
彼のIDを使用して検索したメンバーの詳細のみを取得する相手。検索入力を使用してAngularJSを使用してjsonファイルから詳細を取得

This is my view 
    [1]: https://i.stack.imgur.com/PQ0BP.jpg 
    This is my code 
    [1]: https://i.stack.imgur.com/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>

出典

2017-09-24 Amit Phartiyal

関連するコードがで**でなければなりませんテキスト**としての質問。画像のURLではありません。 –

サービスはすべてのメンバーの配列である 'response.data.member'を返します。それは引数として渡される 'memberId'で何もしません。だから...なぜ、このサービスは会員IDで特定された唯一のメンバーを返すべきだと思いますか？ memberIdによって識別されるメンバーを探すようにコードを変更し、配列全体の代わりにそのコードを返します。ループが必要です。またはArray.filter（）の呼び出し。 –

配列を返すことがわかっています。これを可能にするさまざまな方法を知りたかっただけです。ありがとうbtw :) –

私は正しい答えだ、ここで質問を誤解し申し訳ありません：

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; 
      }); 
     } 
    }]);

出典

2017-09-24 18:16:52 pegla

は、あなたがこのために試みることがあります。

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>

出典

2017-09-24 18:54:08

@ここをクリック|テーブル内のデータをフィルタリングするためのフィルタですが、私たちはliでデータを検索していますが、ng-repeatでフィルタを使用していますが、モデルから確かめてください。ここでは、サービス –

https://code-maven.com/try/examples/angular/angular_table_filter_1.html –

検索入力を使用してAngularJSを使用してjsonファイルから詳細を取得

答えて

関連する問題