Retrieve a data from mongodb to angularjs

Question

My mongorepository

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

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

My model:

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

My data 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"},

My html file

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

My js file

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

How can i retrieve two of my cameraid data "001" and "002" from mongodb to be shown on my dropdownlist using angularJS? " http://localhost:8081/camera/list " is listing all my data on my web service. Anybody can help me with my question?

Answer 1

Though your code depends on the server side but you can try this one. I hope it works. The entire server code is not present. Js should be modified like this:

     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 element change it to {{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;
    }

Answer 2

You should return Object or JSON string because rep.findAll() return an Iterable interface. For example with JSON using Jackson ObjectMapper class:

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

Retrieve a data from mongodb to angularjs

Question

2 answers

solution1
0 2016-06-15 08:55:47

solution2
0 2016-06-15 09:08:23

Retrieve a data from mongodb to angularjs

Question

2 answers

solution1 0 2016-06-15 08:55:47

solution2 0 2016-06-15 09:08:23

solution1
0 2016-06-15 08:55:47

solution2
0 2016-06-15 09:08:23