I have setup backend with NodeJS and MongoDB. In frontend, I am using AngularJS and ngResource. When I run this block of code:
$scope.users = User.query(function() {
console.log($scope.users);
});
it returns this:
What those 'm' letters mean? All of those are objects including the right data, so it works, I was just thinking what does this mean.
It's the name of the constructor that created the object. You can also see this below those values with Promise and Array.
Related
I am trying to read the data from list of Objects where in backend call I am getting proper JSON format but when calling from angular js using response.data getting [Object,Object] as a list. I am getting the data as response.data[0].id but I need to use the data to a $scope variable with data to use further.
[{id : '1',name:'Test'},{id:'2',name'Test1'}]
I need to get the same JSON object in angular as same as backend. I am new to AngularJS. Please let me know how I can proceed with this without pushing to any other variable.
I'm getting data from the server using $resource like this
service
.factory('rulesService', ['$resource', function ($resource) {
var systems = $resource('url');
return systems;
}]);
controller
$scope.rules= rulesService.query();
console.log($scope.rules);
The output I get is
0: Resource
1: Resource
$promise: Promise
$resolved: true
length: 2
I tried to strip $promise & $resolved using
1) angular.toJson($scope.rules)
2)JSON.stringify($scope.rules, null, 2)
Both these are returning []
Can someone help me on this
After reading your comments above, I think your problem is you use $resource wrong.
$resource will return a empty object or array, and then make the http call in the background and populate the array/object once it is complete.
This means that, at the time you console.log the object, it is actually an empty array, but since the log in the browser is pretty smart, it will update the object in the log as well, once the $resource call is done.
this is why console.log(rules[0]) is undefined, while console.log(rules) says the element exists. It didn't at the time of the log.
If you need to do further processing you have to do something like:
var rules = rulesService.query(function () {
console.log(rules[0])
})
you can also use promises instead of a callback, but either way you need to ensure the data is fully loaded
You should be able to simply iterate over the array (and ignore the extra properties). If you want a clean array you could always use a map or similar.
$scope.new_rules = $scope.rules.map(function (rule){
return rule;
})
Your problem is related to asynchronous execution and race conditions.
You're trying to refer to rules[0] before data actually arrives from the $resource.query() call.
Examples:
var rules = rulesService.query();
console.log(rules[0]); //will print nothing. the GET request hasn't been resolved yet.
rules.$promise.then(function (response) {
console.log(rules[0]); //This WILL work assuming you actually get data from the backend.
console.log(response[0]); //This will also work with the same data.
});
I have to make 2 queries or more to get data from the server. for example the first i am getting general information like this:
http://azvsptcsdev02:678/_vti_bin/CPMD.WEBSERVICE/ProjectInfoService.svc/GetProjectDetails
on user click i need to show the summary of this project. so i need to pass the id to get the data what i requred, the url is :
http://azvsptcsdev02:678/_vti_bin/CPMD.WEBSERVICE/ProjectInfoService.svc/GetProjectByID/002
But how to make seperate query according to the page?
at present i am using a server.js like this:
(function () {
"use strict";
angular
.module("tcpApp")
.factory("server", ['$resource', function ($resource) {
return $resource('http://azvsptcsdev02:678/_vti_bin/CPMD.WEBSERVICE/ProjectInfoService.svc/GetProjectDetails');
}]);
})();
$scope.splash = server.query(); //getting json.
It works fine. But how to can update this for both request?
my opinion don't need to get service call,
because your database values already you had.
if $scope.splash have your latest value, then you can get the object by using indexOf().
It's may be no sense. but it is a simple way. else you need call server by using separate query
update:-
I does not mean Seperate Query . I mean you need to pass parameter to the function, if the parameter have any value, then write second query , else you write a first query.
You can get the data from your $scope.splash array by using indexOf() function or map() or some() functions
I'm using AngularFire 0.8
I called the following function to get an instance of an array.
var test = $firebase(new Firebase(URL)).$asArray();
When I console.log 'test', I get the following (see screenshot).
It looks like test is an array. However, when I do "console.log(test[0])", I get undefined.
Why isn't test an array with two elements like console.log(test) seems to show it should be???
Help!!
Most likely you're calling console.log on the array before the data is loaded.
To access the data in the array, you have to wait until the data is loaded.
To do that in code, you use this construct:
var test = $firebase(new Firebase(URL)).$asArray();
test.$loaded().then(function(array) {
console.log(array[0]);
});
Update
This answer gets more upvotes than I think it's worth. When you're using AngularJS and AngularFire, it is often a bad omen when you use console.log to debug the data that is loaded.
The AngularFire documentation on handling asynchronous operations now has to say on it:
The easiest way to log the data is to print it within the view using Angular's json filter.
{{ data | json }}
AngularFire tells the Angular compiler when it has finished loading the data, so there is no need to worry about when it be available.
I have AngularJS application that use $resource service to retrieve data using query() method and create new data using model.$save() method. This works fine exactly as the docs say it should.
My question is how to update my local data fetched using MyService.query() in the first place after I've changed it?
I took the most simple approach for now and I simply call the query() method again. I know this is the worst way efficiency-wise but it's the simplest one.
In my server-side I return the whole state-representation of the new model. How can I add the newly created model to the array of the local data?
UPDATE
I've end up simply pushing the model return from the server but I'll still be happy to know if that's the way to go. From what I can understand from the source code the return array is plan-old-javascript-array that I can manipulate myself.
This is the code I used
$scope.save = function () {
var newComment = new CommentsDataSource();
newComment.Content = $scope.todoText;
newComment.$save({ id: "1" }, function (savedComment) {
$scope.comments.push(savedComment);
});
}
I would simply get the whole list again, to be able to see the modifications brought to the list by other users.
But if the solution you're using suits you, then use it. It's corrrect. Angular uses bare-bones JavaScript objects. Adding a new instance to a list in the scope will refresh the list displayed on the page.