使用搜索輸入使用AngularJS從json文件獲取詳細信息

我的目標：
我想搜索會員ID的輸入成員詳細信息。

我現在還沒有到現在嗎？：
我的視圖已準備就緒。我創建了一個名爲myService的服務，它使用$ http 服務從members.json文件中獲取數據。

我的問題？
取而代之的是查找特定編號的詳細信息，我得到所有成員的名字

想要問什麼？
誰只使用他的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

相關的代碼必須在**這個問題，作爲文本**。不作爲圖像的網址。 –

您的服務返回'response.data.member'，它是所有成員的數組。它不會對作爲參數傳遞的'memberId'做任何事情。那麼......爲什麼你認爲這個服務應該只返回一個成員，由memberId來表示呢？你爲什麼不改變你的代碼來尋找由memberId標識的成員，並返回它而不是整個數組？你需要一個循環。或者調用Array.filter（）。 –

我知道它返回一個數組。我只是想知道可能的不同方法。 Thankyou 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文件獲取詳細信息

回答

相關問題