I have struggling to understand the following - angularjs

I used $http request to get the json data like this
$http.get('test.json')
.success(function(response) {
$scope.contents=response;
});
but when i inspected in developers tool in chrome,
it showing
$http.get('test.json')
.success(function(response) { response=Array[84]// here i got json array
$scope.contents=response; // here Also response=array[84]
});
but $scope.contents is undefined when i put breakpoint to check the value of $scope.contents.
Why is it happening?
Am i Doing anything wrong here?``

you have to make change as follows:
$http.get('test.json')
.success(function(response) { response=Array[84]// here i got json array
$scope.contents=response.data; // here Also response=array[84]
});
now it will give correct result when check for $scope.contents.

Related

Ng-table get filtered data

this is an extract of a code im working on using ng-table. My problem is really simple and supposedly it should be plain easy to overcome but im just unable to do it.
This is the extract :
$scope.loading++;
clean();
$scope.environment = "SOMEENV";
$http({
method: 'GET',
url: 'http://SOMEIP:SOMEPORT/all?environment=SOMEENV'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
$scope.nodes = response.data;
$scope.chartdataservtype=countservtype(response.data);
$scope.tableParams = new NgTableParams({}, { dataset: response.data.rows });
... more code after that.
Lets says that later on, I want to get the FILTERED DATA, not only of the visible part of the table, but from the WHOLE TABLE. According to their GitHub repo, I should be able to do that so easily as writing :
var filteredData = $scope.tableParams.data;
But the problem is that this approach is giving me ONLY THE VISIBLE rows on the table. And I want the whole set of data.
There is some people saying I can customize the getData function of ng-table ( although on their repo other people is saying is not needed as it is "solved" ) but i dont know how to do that.
Can you guys help with this?
You can access the filtered data including the ngTableEventsChannel service in your controller, and listen for filter changes:
function yourController($scope, NgTableParams, ngTableEventsChannel) {
activate();
function activate() {
ngTableEventsChannel.onAfterDataFiltered(function(tableParams, filteredData){
//DO SOMETHING
});
}
}
In that case, tableParams will be the NgTableParams instance that has changed. And filteredData will be what you want to access, your filtered data (yahoo!).
More info: http://ng-table.com/api-docs/classes/ngtableeventschannel.html

I want to build a custom angularjs Unique Value Directive

I want to build a directive that checks for duplicate username. So I have created an index.html file and an uniqueId directive. Now in the directive I am not able to do ngModel.setValidity(). It is getting undefined.
Also I am fetching data from a local json file username.json.
When I console log console.log(ngModel.$setValidity('unique', unique)) I get undefined.
I have created a plunk for the code::
https://embed.plnkr.co/XTPf9PjiMn9if5Y0DaHt/
You need to iterate through the users present in JSON. And, if your currentValue matches any of those, you need to set it as invalid using $setValidity. Like this:
dataService.getUsers().then(function(currentusers) {
console.log(currentusers)
//Ensure value that being checked hasn't changed
//since the Ajax call was made
if (currentValue == element.val()) {
currentusers.forEach(function(user) {
if (currentValue === user.property) {
ngModel.$setValidity('unique', false)
}
});
}
}, function() {
//Probably want a more robust way to handle an error
//For this demo we'll set unique to true though
ngModel.$setValidity('unique', true);
});
});
Also, your service was getting the JSON every time. Alternatively, you can store your JSON response in a variable inside your angular service (which is a singleton) so it's faster than before. Like this,
dataFactory.getUsers = function() {
var deferred = $q.defer()
if (angular.isDefined(savedResults)) {
deferred.resolve(savedResults.data);
return deferred.promise;
} else {
return $http.get(serviceBase).then(
function(results) {
savedResults = results
return results.data;
});
}
};
Here, we return a resolved promise if data is already available. It will get the JSON for the first time and will use from within.
working plunker
please check plnkr link
If you type nitesh#gmail.com, it will display email already in use.
If you type nitesh#gmail.com1, it won't show error message.
I have changed condition.

Reading Firebase data is returning client error despite rule being "true"

I am trying to figure out how to do a simple CRUD with angular + firebase. I started with a read operation. I have the following data structure:
Given that, I created the following rules:
I have a working factory as follows:
factory('wordsFactory', function($http){
var factory = {};
var words = [
{content:"hi", definition:"ooo"},
{content:"h3", definition:"ooo222"}
];
factory.getWords = function(){
return words;
//ajax call here
};
factory.addWords = function(){
//something
}
return factory;
})
I modified it to try and include the call like so:
factory('wordsFactory', function($http){
var factory = {};
var words = [];
var ref = new Firebase('https://my-firebase.firebaseio.com/words');
ref.once('value', function($scope, snapshot) {
$scope.variable = snapshot.val();
words = [
{content: ref.content, definition: ref.definition}
];
});
factory.getWords = function(){
return words;
//ajax call here
};
factory.addWords = function(){
//something
}
return factory;
})
However, whenever I try to read I get:
Error: permission_denied: Client doesn't have permission to access the desired data.
and
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'val' of undefined
A number of things, I realize that because of the way I have it, even if it worked, it would only return 1 value. I'm ok with that right now since I just want to figure out how to make it work. I also know that my current data structure could be greatly improved, again I just did it to learn but feel free to suggest anything you think might help me.
My chief concern right now is that I can't get it to read. I should also mention that the factory works properly without firebase, it's being called in the main controller.
I think your issue is related to RULES.
Try replacing the default RULES to below:
{
"rules": {
".read": true,
".write": true
}
}
Now you can access without any Errors.
I'm not sure how you came to this construct:
ref.once('value', function($scope, snapshot) {
But the once callback only takes a single argument for the value event. See the relevant Firebase API documentation.
So you'll have to change it to:
ref.once('value', function(snapshot) {
And find another way to get the scope in there.
For troubleshooting the failing read operation, I recommend using the simulator tab in your Firebase dashboard. It will typically show you a better explanation of why the operation is rejected. This detailed information is intentionally not shown in the regular clients.

Assign multiple $http return data to an array in the called order

$scope.iter = 0;
$scope.myArray.forEach(function () {
$http.get($scope.myArray[$scope.iter].URL)
.success(function (data) {
$scope.myArray2.push(data);
//$scope.myArray2[$scope.iter]=data
});
$scope.iter++;
})
The above code works but I want the results in myArray2 in the same order as it was called. I know that I cannot expect $scope.myArray2[$scope.iter]=data to work but that is what I need.
I looked at the angular documentation on promises but could not make out how to use it for the above.
You can put all promises from the get requests in an array and use $q.all() to create a promise that resolves when all underlying promises resolve. You can then iterate the responses in the order they were added to the requests array, and push each response's data into the array in order...
function controller ($scope, $q) {
// ...
var requests = [];
var $scope.myArray2 = [];
angular.forEach($scope.myArray, function (value) {
requests.push($http.get(value.URL));
});
$q.all(requests).then(function(results) {
angular.forEach(results, function(result) {
$scope.myArray2.push(result.data);
});
});
}
Dont understand what you are trying to achieve, but here is an example of simple deferred promises in a controller:
var firstDefer= $q.defer();
firstDefer.promise.then(function(thing){
// here you make the first request,
// only when the first request is completed
//the variable that you return will be filled and
//returned. The thing that you return in the first .then
// is the parameter that you receive in the second .then
return thingPlusRequestData;
}).then(function(thingPlusRequestData){
//second request
return thingPlusPlusRequestData;
}).then(function(thingPlusPlusRequestData){
//and so on...
});
firstDefer.resolve(thing);
//when you call .resolve it tries to "accomplish" the first promise
//you can pass something if you want as a parameter and it will be
// the first .then parameter.
Hope this helps u :D
You will normally NOT get the results in the order you called the $http.get(...) function. Mind that the success(...) function is called asynchronously, whenever the http response comes in, and the order of those responses is totaly unpredictable.
However you can work around this by waiting for all the responses to finish, and then sort them according to your criteria.
Here is the working fiddle: http://fiddle.jshell.net/3C8R3/3/

Restangular PUT attaches _id two times for no reason

Iam using Restangular on the clientside with _id as Id field. Sadly Restangular generates wrong URLs, maybe you could say me where the error is?
Restangular.all('/users').one(id).get().then(functon(results) {
$scope.data = results;
})
After the user edited the data:
$scope.save = function() {
$scope.data.put().then(...);
};
This very simple sample generates the following URL with the id twice. I have no idea what went wrong. :(
PUT /users/537283783b17a7fab6e49f66/537283783b17a7fab6e49f66
Solved it by changing the Request workflow of Restangular.
I don't now why, but this approad does not work:
Restangular.all('/users').one(id).get() ... result.put();
But this does:
Restangular.one('/users/',id).get() ... result.put();
Also it is important to tell Restangular that you were using _id instead of id:
angular.module('App').config(function(RestangularProvider, AppSettings) {
RestangularProvider.setRestangularFields({id: "_id"});
});

Resources