マイmongorepository

をangularjsするためのMongoDBからデータを取得マイmongorepository

import org.springframework.data.mongodb.repository.MongoRepository; 

public interface RecordRepository extends MongoRepository<Record, String> { 
}

マイモデル：

public class Record { 

private long id; 
private String cameraid; 

@JsonSerialize(using=DateTimeSerial.class) 
private DateTime timestamp; 
private String filename; 


public Record(long id,String cameraid, DateTime timestamp, String filename) { 
    this.id=id; 
    this.cameraid = cameraid; 
    this.timestamp = timestamp; 
    this.filename = filename; 
} //getters and setters

マイコントローラ：MongoDBの中

@RequestMapping(value="list") //controller for list 
public List<Record> getList() { 
     List<Record> recordList = rep.findAll(); 


     return recordList; 
} 
}

マイデータ

{"id":1,"cameraid":"001","timestamp":"2016/06/15 15:03","filename":"e997a7321a3d2966802ba466feca69f8"}, 
{"id":2,"cameraid":"001","timestamp":"2016/06/15 15:03","filename":"63999edc2218f490cd883592fe5d26a1"}, 
{"id":3,"cameraid":"002","timestamp":"2016/06/15 15:03","filename":"9ba6722aed8aa1aae0e4545ee6d376c3"},

私のhtmlファイル

<!DOCTYPE html> 
<html ng-app='camListApp'> 
<head> 

<style> 
#myDIV { 
width: 500px; 
height: 500px; 
position: relative; 
right: 20px; 
top: 90px; 
} 

table, th, td { 
border: 1px solid black; 
border-collapse: collapse; 
} 
</style> 
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> 
</script> 
<script src="hello.js"></script> 
<title>Image viewer </title> 
</head> 

<body> 
<h3>Search by cameraid:</h3><br> 
<select ng-model="searchBox" style="width:25%"> 
<option value="000000006f4280af">{{record.cameraid}}</option> 
</select> 


<div ng-controller="Hello"> 

<br> 
<table style="width:50%"> 
    <thead> 
     <tr> 

     <th>CamID</th> 
     <th>Timestamp</th> 
     <th>View Image</th> 

     </tr> 
    </thead> 

    <tbody> 

     <tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'"> 

     <td>{{record.cameraid}}</td> 
     <td>{{record.timestamp}}</td> 
     <td><button ng-click="toggleCustom()" onclick="myFunction()">View</button></td> 

     </tr> 
    </tbody> 
    </table> 
    <span id="myDIV" ng-hide="custom"><img src="" width="300" height="300"> 
    </span> 

    <!--<span ng-hide="custom">To: 
     <input type="text" id="to" /> 
    </span>--> 
    <span ng-show="custom"></span> 
    </div> 
    <script> 
function myFunction() { 
document.getElementById("myDIV").style.position = "absolute"; 
} 
</script> 

</body> 
</html>

私のjsファイル

var camListApp = angular.module('camListApp', []); 
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 

$scope.custom = true; 
$scope.toggleCustom = function() { 
    $scope.custom = ! $scope.custom; 
}; 
$http.get('http://localhost:8081/camera/list').then(function(response) { 
    console.log(response); 
     $scope.records= response.data; 
    }); 
}]);

はどのようにMongoDBから私のcameraidデータ "001" と "002" の2つがangularJSを使用して、私のドロップダウンリストに表示されることを取り出すことができますか？ "http://localhost:8081/camera/list"は私のWebサービス上のすべてのデータをリストしています。誰も私の質問で私を助けることができますか？

出典

2016-06-15 Alvin Wee

また、サーバーのサイドコードを表示します。 dbからデータを取得しようとしましたか？ – Shrabanee

'console.log（応答）;はあなたに何を与えていますか？ – Shrabanee

@ titi23私はそれを取得する方法がわからないので、私はドロップダウンリストにそれらの2つのカメラIDを取得しようとするhavent。 –

コードはサーバー側に依存しますが、これを試すことはできますが、私はそれがうまくいきたいサーバーコード全体が存在しません。 Jsのこのような修飾されなければならない：

 var camListApp = angular.module('camListApp', []); 
     camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 
var value1="001"; 
var value2="002"; 
       $http.get('http://localhost:8081/camera/list?value1='+ value1+'&value2='+ value2).then(function(response) { 
       console.log(response); 
        $scope.records= response.data; 
       }); 
     }]);

HTMLで選択素子にに変更{{records.cameraid}}

@RequestMapping(value="list") //controller for list 
    public List<Record> getList(@RequestParam("value1") String value1, @RequestParam("value2") String value2) { 
      List<Record> recordList = new ArrayList<Record>(); 
List<Record> valueRecord1=rep.findByCameraId(value1); 

List<Record> valueRecord2=rep.findByCameraId(value2); 
recordList.add(valueRecord1); 
recordList.add(valueRecord2); 
return recordList; 
    }

出典

2016-06-15 08:55:47 Deepanjan

私のサーバーのサイドコードは既に表示されています –

これは間違いなく動作します。 – Deepanjan

あなたはrep.findAll()戻りANためObject又はJSON文字列を返すべきIterableインターフェイス。たとえば、Jackson ObjectMapperクラスを使用するJSONの場合：

ObjectMapper mapper = new ObjectMapper(); 
String output = "[]"; 
try { 
    output = mapper.writeValueAsString(rep.findAll()); 
} catch (Exception e) { 
    e.printStackTrace(); 
} 
return output;

出典

2016-06-15 09:08:23

答えて

関連する問題