As a beginner in Spark framework and AngularJS I was trying to build a simple REST application. However I apparently can’t retrieve data from the server and display using Angular.
I started with simple task:
#Data
public class Todo {
private String title = "foo";
private String description= "bar" ;
}
In order to display the todo in the browser I send a JSON object as a response to get request.
get("/tasks", (request, response) -> {
response.type("application/json");
Todo todo = new Todo();
ObjectMapper mapper = new ObjectMapper();
mapper.configure(SerializationFeature.INDENT_OUTPUT, true);
String data = mapper.writeValueAsString(todo);
return data;
});
The Angular part looks as follows:
(function() {
var app = angular.module('todoapp', []);
app.controller('TaskController', ['$http', function($http) {
var store = this;
store.tasks = [];
$http.get('/tasks').success(function(data) {
store.tasks = data;
});
}]);
})();
And the index.html :
<ul ng-controller="TaskController as taskCtrl">
<li ng-repeat="task in taskCtrl.tasks">{{task.title}}, {{task.description}}</li>
</ul>
After running Spark and entering http://localhost:4567/tasks in the browser,it shows only JSON representation:
{
"title": "foo",
"description": "bar"
}
What am I doing wrong?
In your Spark code you are creating a '/tasks' endpoint, which you are attempting to hit with your angular code. When you try to run this in the browser, you are just hitting your '/tasks' api endpoint which is returning the expected response. You need to create another endpoint in Spark which will serve up the appropriate HTML and JavaScript code.
I'm not sure what version of angular you are using but in the version I use $http returns a different data structure than the one you show.
So to get the data from an $http request I would do something like,
$http({
url: '/tasks',
method: 'get'
}).then(function(result){
$scope.tasks = result.data;
});
The result.data is where the data structure on $http returns differ from what I see in your code.
Try console.log(data) to get a look at what the call is getting back.
Related
I am building a web application using angularJS with Node.js backend. I am new to them both and after several attempts, I made it work to let Node.js request a JSON (using request module) and sent it to angular. However, I am pretty confused about how it works.
Here is my code,
Node.js:
app.get('/query', function(req, res){
if (!req.query.func) { // query TIME_SERIES_DAILY
var request_url = 'http://API';
var data = request(request_url);
console.log(typeof data); // Object
data.pipe(res);
{
AngularJS:
myControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('http://localhost:3000/query').then(function successCallback(data) {
console.log(typeof data); // Object
}, function errorCallback(data) {
// error msg
});
}]);
After I console.log() the type of data at both ends, they are all "Object". In my understanding, both of them parsed JSON string into JSON object (if I was wrong please correct me). But how did node.js pipe() an object? (In my understanding only stream can be piped)
Can anyone explain it for me? Thanks!
I'm using node with express and I want access object sent by server.
For example
server side:
router.get('/some_page/', (req, res) => {
res.render('some_page', {
data: {"somevar1":"somevalue", "somevar2":"somevalue2"}
});
});
client side javascript:
var objSentFromSrv = ??? // here i want this object and then perform some action on it
Is this possible/legitimate?
EDIT:
I'm using handlebars as template engine.
Figured out somehow.
function middlewareAppendingLocals(req, res, next) {
res.locals.layoutV = myValue;
next();
}
router.post('/page/', middlewareAppendingLocals, (req, res) => {
res.render('page_to_render');
});
In my case this variable is from database and I'm giving it based on id posted from antoher page. But still how can I access it from javascript, not only form .hbs layout file.
Then page_to_render have and I can you handlebars {{}} to get it.
You need to encode the object as JSON like this:
router.get('/some_page/', (req, res) => {
res.send(JSON.stringify({
data: {"somevar1":"somevalue", "somevar2":"somevalue2"}
}));
});
and then use AJAX on the front-end, using jQuery you can use
$.get('/some_page/', function(data) {
var objSentFromSrv = JSON.parse(data);
});
or shorter:
$.getJSON('/some_page/', function(data) {
var objSentFromSrv = data;
});
Yes. This is possible and legitimate. Assuming you are using EJS, add a line like this to your template:
<script>
const objSentFromSrv = <%-JSON.stringify(data)%>;
</script>
If you're using a different templating engine, you'll just need to look up the specific syntax on how to serialize objects.
AjAX is overkill for this use-case.
If you are using AngularJS as your front end service, you can create a controller and have it inject $scope and $http to get the data. For example:
var app = angular.module('myApp', []);
app.controller('mainController', ($scope, $http) => {
$scope.data= {};
$scope.getData = function() {
$http.get('/some_route/')
.success((data) => {
$scope.data = data;
console.log(data);
})
.error((error) => {
console.log(error);
});
};
});
And then in the front end, call getData().
https://docs.angularjs.org/guide/controller
Your templating engine is going to take the arguments passed to that render call and produce HTML (often) or JSON. It's not really sending objects, just text data.
If you're looking to change the state of some object that exists on the server side, you'll want to create some sort of API to do that. Send data down to the client, make changes to that data, then send it back to the server to be incorporated into the original object.
I am using Handlebar js and found to get server-side data at client side Javascript just using {{{ server-side JSON }}
`
Server-side Code send JSON adminData on the client side
return h.view('reports' ,{ adminData: request.auth.credentials});
Client side Code to get adminData inside script tag
console.log("{{{adminData}}}")
I feel like tons of people do this all the time, and yet I have been unsuccessful in finding similar examples.
I am getting data from the backend using angularJS ($http.post) to a controller in a javascript file, and presenting it in one html. The data is received after sending a search query from that html. Now, I want to "export" that data to another JS file and to present some of it again, in a new html. The problem is that I have access to that data only through the Search Controller during the searching session, and I probably need to store it somehow or send it to another controller/ JS file.
Unfortunately, I cannot use $cookies. Also, I am trying to avoid sending a new request through the server if I don't have to.
I have read a some about services in angular, however, I am new to angular (and UI in general), and for some reason was unable to implement this for my specific case.
Here is an example of the relevant controller, after getting a search request from the html page:
app.controller('SearchCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.searchJSON = {
searchToken: [],
searchOption: []
$scope.sendSearch = function() {
//preparing JSON to send request to server
$scope.searchJSON["searchToken"] = this.search.searchToken;
$scope.searchJSON["searchOption"] = this.search.searchOption;
var json = $scope.searchJSON;
//sending and getting response (JSON object)
$http.post("http://some_host", json)
.success(function(response) {
$scope.collections = response.searchResults;
});
};
}]);
So the data I am interested in passing on to another JS file is in $scope.collections , which is a JSON file (I don't want use the same JS file for both html pages, so was hoping to call that data from a new controller in a new JS file).
Will appreciate any answers, leads, or similar examples from the web. Thank folks!
One possible way to solve this is by using sessionStorage/localStorage on $window. You can store your data there and after redirecting to another file, you can use it by invoking.
You are right to bring up services because that is how I would personally implement this. Create a service to handle the search request and also to store the result via promises:
angular.module('yourModule')
.factory('searchService', function($http, $q) {
var searchService = {
resultsPromise: null,
sendSearch: function(token, option) {
var dfd = $q.defer();
var json = {
searchToken: token,
searchOption: option
};
$http.post("http://some_host", json).then(
function(response) {
// resolve your deferred
dfd.resolve(response.data);
},
dfd.reject
);
this.resultsPromise = dfd.promise;
return dfd.promise;
}
};
return searchService;
});
Then in your current controller, just do:
app.controller('SearchCtrl', ['$scope', 'searchService',
function($scope, searchService) {
$scope.searchJSON = {
searchToken: [],
searchOption: []
$scope.sendSearch = function() {
searchService.sendSearch($scope.searchJSON.searchToken, $scope.searchJSON.searchOption);
};
Then in your other file, simply look at the currentResults of the same service:
app.controller('OtherCtrl', function($scope, searchService) {
if (searchService.resultsPromise) {
searchService.resultsPromise.then(function(results) {
$scope.results = results;
});
}
});
You can ditch the $http service and use $resource instead. From there you can use $cacheFactory as seen in this post: How to cache an http get service in angularjs
An alternative solution is http://jmdobry.github.io/angular-cache/ which works well with ngResource and can also easily be configured to sync to localStorage, so requests don't need to be re-done after page refresh.
`$resource('my/kewl/url/:key', { key: '#key' }, {
'get': { method: 'GET',
cache: $angularCacheFactory('MyKewlResourceCache', {
storageMode: 'localStorage' })
}
});`
I'm trying to get familiar with $resource in order to use RESTful Web Services.
So, for the attempt, I declared a factory like this :
'use strict';
angular.module('BalrogApp').factory('Req', ['$resource', function($resource) {
return $resource('http://localhost:8000/api/catalog/requests/:id', {id: '#id'}, {
'update': { method: 'PUT'},
'query': { method: 'GET'}
});
}]);
In my Controller I have this :
angular.module('BalrogApp').controller('requestsController', function(Req, $route, $rootScope, $scope, $location, $routeParams) {
this.$route = $route;
var controllerScope = this;
this.r = Req.get({ id:4 });
console.log(this.r);
This works fine, in my console, I can see my object with the data retrieved from the services for the item with id 4.
However I'm not sure I'm properly retrieving the data since the object i'm storing in r contains an id like it should in the object details (clicking on "Object" in the browser console displays the object details including its id) but the object itself (r) displayed on the console contains only 2 fields and is presented as follows : Object { $promise: Object, $resolved: false }.
So, in the end, console.log(this.r); works but console.log(this.r.id); doesn't even if r is supposed to contain an id just like in the object details from the browser inspector.
Also, how can I configure this service in order to be able to use get() with the id parameter just like I'm doing which results in calling http://localhost:8000/api/catalog/requests/:id but also without the id parameter which results in calling http://localhost:8000/api/catalog/requests
As the call to the REST API is asynchronous you shout wait for the returned promise to resolve when using the Req.get({ id:4 });
Use:
Req.get({ id:4 }).$promise.then(function(result){
console.log(JSON.stringify(result));
});
instead.
For the second part of your question: Using data without an id property should be fine. This data, however, will be transfered in the request body and not as a request parameter.
I am using nodeJS so the server will send the following json object to controller by doing:
data = {
"question": "theQuestion",
"answer": "theAnswer"
};
res.json(data);
Then in the controller, I want to manipulate the variable like:
data = QA.get();
$scope.q = data[question] + "Some additional info here";
QA is the service defined as:
angular.module('questionServices', ['ngResource'])
.factory('QA', function ($resource) {
return $resource('/qa');
});
However, the error message always tells me that data[question] is undefined. What is the right way to access the value? I have tried data.question. It doesn't work either.
I know I can simply show the json values by using ng-repeat in html but I want to be more flexible managing the values.
Seems you QA function you use $http or $resource to get the ajax response.
If you return $http.get/$http.post in you QA service, you can use this code to handle the json response:
QA.get().success(function(data){
console.log(data);
console.log(data.answer);
}).error(functoin(data){
//handle error here.
});
If you use $resource in your QA service, then you can use this code to handle that:
QA.get().$promise.then(function(data){
console.log(data);
console.log(data.answer);
}).then(function(error){
//handler error here.
});
Here is $http document.
Here is $resource document.
P.S you need to understand in ajax, javascript handle the request in async. That means when
exec these code:
$scope.data = QA.get()
console.log($scope.data); // QA.get() send a http request. Now data is still promise object.
you cannot get this response immediately. So if you try to log the data, or use console.log(data.answer) to get data.answer. you will get undefined
However in you html view. You can get the data with {{data|json}} . This is because angular will $watch your data. And once data($resource promise object) is change(means http request is finished), Angular will render your view automatically.
That's why in your view you can get data.answer. But in your controller, you cannot.
$scope.data = QA.get();
console.log(data);
or in your template: {{data | json}}
This will give you a hint