Abrufen einer Daten aus mongodb

My mongorepository AngularJSAbrufen einer Daten aus mongodb

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

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

My Modell:

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

My Controller:

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


     return recordList; 
} 
}

Meine Daten in mongodb

{"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"},

Meine HTML-Datei

<!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>

Meine js Datei

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

Wie kann ich zwei meiner cameraid Daten "001" und "002" von mongodb abrufen mit AngularJS gezeigt auf meiner Dropdownlist werden? "http://localhost:8081/camera/list" führt alle meine Daten in meinem Webservice auf. Kann mir jemand bei meiner Frage helfen?

Quelle

2016-06-15 Alvin Wee

Auch zeigen Sie Ihre Server-Seite Code. Haben Sie versucht, die Daten von db abzurufen? – Shrabanee

Was 'console.log (Antwort);' gibt Ihnen? – Shrabanee

@ titi23 Ich habe nicht versucht, diese beiden Kamera-IDs auf meine Dropdown-Liste zu bekommen, weil ich keine Ahnung hatte, wie ich sie abrufen kann. –

Ihr Code hängt zwar von der Serverseite ab, aber Sie können diese versuchen. Ich hoffe, es funktioniert. Der gesamte Servercode ist nicht vorhanden. Js sollte wie folgt geändert werden:

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

In html in select-Elemente, es zu ändern {{}} 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; 
    }

Quelle

2016-06-15 08:55:47 Deepanjan

Ich habe meinen Server-Side-Code bereits –

gezeigt Dies wird definitiv funktionieren. – Deepanjan

Sie Object oder JSON Zeichenfolge weil rep.findAll() Rückkehr einer Rückkehr sollten Iterable Schnittstelle. Zum Beispiel mit JSON mit Jackson ObjectMapper Klasse:

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

Quelle

2016-06-15 09:08:23

Abrufen einer Daten aus mongodb

Antwort

Verwandte Themen