How to get a variable from the Angular controller to a view

How to get a variable from the Angular controller to a view - javascript

I have a controller that looks like this:
angular.module('my_app')
.controller('QueryCtrl', ['$scope', 'Query', function ($scope, Query) {
$scope.onSubmit = function() {
var json = $.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' });
console.log(json);
$scope.queries = json;
};
}
])
And a view that looks like this:
<div ng-controller="QueryCtrl">
<form ng-submit="onSubmit()" >
<textarea ng-model="query_box" name="my_input"></textarea>
<button type="submit">Submit</button>
</form>
{{ queries }}
<ul ng-repeat="query in queries">
<li>{{query}}</li>
</ul>
</div>
The problem is that, when I click the submit button, the javascript console successfully logs the correct json object, which has a property
responseJSON
You can take a closer look at the object I want by looking typing
$.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' });
into the javascript console yourself and checking out the object.
However, in the view, when I print out the "queries" object, it appears to not have a responseJSON attribute, but only a readyState attribute.
Where is the rest of my json object?

Try something like this:
$scope.onSubmit = function() {
var json = $.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' });
json.done(function(result){
$scope.result = result;
$scope.$apply();
})
console.log(json);
$scope.queries = json;
};
}
<div>{{result}}</div>

var projectangular.module('my_app')
.controller('QueryCtrl', ['$scope', 'Query', function ($scope,$http, Query) {
$scope.onSubmit = function() {
$http.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' }).then(
//sucess
function(response){
angular.copy(response ,$scope.queries);
console.log(json);
},
//error
function(){
alert("cant post");
});
};
}
])

As CAT commented, what you got back from .post is a promise object. You will have to wait for post request to complete (fail or succeed). Following syntax may be little off. I just typed it on the fly.
angular.module('my_app').controller('QueryCtrl', ['$scope', 'Query', function ($scope, Query) {
$scope.onSubmit = function() {
var json = $.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' }).then(function(response){
console.log(response.data);
$scope.queries = response.data;
$scope.$apply();
}, function(response){
console.log(response.data);
$scope.queries = response.data;
$scope.$apply();
});
};
}])

That's because of the promise system and how the objects are printed in the console, they are printed by reference and not by value. Try doing console.log(JSON.stringify(json)) which is a string and not an object and you will see that you are missing the the responseJSON attribute. you responseJSON attribute is probably attached to the object at a future time but the console.log(Object) will print it's current value, even tho that value was added after you used console.log.

Related

returning image/jpeg as arraybuffer or blob

I am currently making a call to my api which returns an image as an image/jpeg. My issue is the when calling the url through javascript angular .factory resource I am getting my array buffer as empty {}. Also, the bytes length is 0. If I make the call to the api url with response type '' or 'text' I do see value of multiple types. What am I missing here? Thank you for your help!
JS:
.factory("Img", function($resource) {
return $resource("http://mypathTo/image/:id", {
id: "#id"
}, {
responseType: '' //arraybuffer return empty
});
});
app.controller //code
$scope.getImage = function(productid) {
console.log(productid);
par = {id: [productid]};
Img.getImage(par).$promise.then(
function(data){
console.log("success:" + data); //I am able to see bytes when coming back as text but not with arraybuffer as data.bytelength = 0
scope.productionPicturePath = data;
return data;
},
function(data){
console.log("error" + data);
}
);
}
}

The $resource service can only return JavaScript objects or arrays depending on isArray. To get exotic objects such as ArrayBuffer or Blob, use the $http service.
The DEMO
angular.module("app",[])
.controller("ctrl", function($scope,$http) {
var vm = $scope;
var url="//i.imgur.com/fHyEMsl.jpg";
var config = { responseType: 'blob' };
$http.get(url,config)
.then(function(response) {
console.log("OK");
//console.log(response.data);
vm.blob = response.data;
vm.dataURL = URL.createObjectURL(vm.blob);
console.log(vm.dataURL);
}).catch(function(response) {
console.log("ERROR");
throw response;
});
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
BLOB type {{blob.type}}<br>
BLOB size {{blob.size}}<br>
<img ng-src="{{dataURL}}" height="100" />
</body>

working with deferred results in angularjs

Can't seem to get my head over the concept of 'promise' in AngularJS, I am using the restangular library to fetch a resource over REST, however I always get null results. Here's the code
.service('CareersService', [ 'Restangular', '$sce', function(Restangular, $sce){
var vacancies = [];
var result;
this.getVacancies = function() {
Restangular.all('job_posts').getList({active: 'true'}).then(function(job_posts){
job_posts.forEach(function(job_post){
vacancies.push(_.pick(job_post,['id','title','min_experience','max_experience','location']));
})
})
return vacancies;
}
this.getVacancy = function(job_id){
Restangular.one('job_posts',job_id).get().then(function(job_post){
result = _.pick(job_post, 'title','min_experience','max_experience','location','employment_type','description');
var safe_description = $sce.trustAsHtml(result.description);
var emp_type = _.capitalize(result.employment_type);
_.set(result, 'description', safe_description);
_.set(result, 'employment_type', emp_type);
});
return result;
}
}]).controller('DetailsCtrl', ['$scope' ,'$stateParams', 'CareersService' ,function($scope, $stateParams, CareersService) {
$scope.data.vacancy = { title: 'Loading ...', contents: '' };
$scope.data.vacancy = CareersService.getVacancy($stateParams.job_id);
}])
and then in view
<div class="container">
<a ui-sref="careers" class="btn btn-primary">Show All</a>
<div class="row">
<h2>{{ data.vacancy.title }}</h2>
<p>{{ data.vacancy.min_experience }}</p>
<p>{{ data.vacancy.max_experience }}</p>
<p>{{ data.vacancy.location }}</p>
<p>{{ data.vacancy.employment_type }}</p>
<p ng-bind-html="data.vacancy.description"></p>
</div>
</div>
Am I missing something in the way to use promises?
Update
here's the updated code thanks to all the help I got here,
this.getVacancies = function() {
Restangular.all('job_posts').getList({active: 'true'}).then(function(job_posts){
job_posts.forEach(function(job_post){
vacancies.push(_.pick(job_post,['id','title','min_experience','max_experience','location']));
})
return vacancies;
})
}
this.getVacancy = function(job_id){
Restangular.one('job_posts',job_id).get().then(function(job_post){
vacancy = _.pick(job_post, 'title','min_experience','max_experience','location','employment_type','description');
...
return vacancy;
});
}
}])
And in controllers
CareersService.getVacancy($stateParams.job_id).then(function (vacancy){
$scope.data.vacancy = vacancy;
});
and
CareersService.getVacancies().then(function (vacancies){
$scope.data.vacancies = vacancies;
});
I now get the error
Cannot read property 'then' of undefined
At the line
CareersService.getVacancies().then(function(vacancies) {

Restangular makes an API call over a http, and once it make a call it returns underlying promise object. And inside .then function of it you can get the data responded by API.
So here you are making an async call and considering it to happen it in synchronous way like you can see you had returned result/vacancies array from Restangular call, in that way result/vacancies is always going to be empty.
In such you should return a promise from a service method. And return appropriate formatted data from promise so that you can chain that promise in controller as well(by retrieving a data).
Service
this.getVacancies = function() {
//returned Restangular promise
return Restangular.all('job_posts').getList({
active: 'true'
}).then(function(job_posts) {
job_posts.forEach(function(job_post) {
vacancies.push(_.pick(job_post, ['id', 'title', 'min_experience', 'max_experience', 'location']));
});
//return calculated result
return vacancies;
})
}
this.getVacancy = function(job_id) {
//returned Restangular promise
return Restangular.one('job_posts', job_id).get().then(function(job_post) {
result = _.pick(job_post, 'title', 'min_experience', 'max_experience', 'location', 'employment_type', 'description');
var safe_description = $sce.trustAsHtml(result.description);
var emp_type = _.capitalize(result.employment_type);
_.set(result, 'description', safe_description);
_.set(result, 'employment_type', emp_type);
//returned result to chain promise
return result;
});
}
As I said now you can easily chain promise inside controller by having .then function over service method call.
CareersService.getVacancy($stateParams.job_id).then(function(result){
$scope.data.vacancy = result;
});
Update
The syntax without .then would work, but you need to make small change in it by adding .$object after a method call.
$scope.data.vacancy = CareersService.getVacancy($stateParams.job_id).$object;
$object is property which added inside promise object by Restangular. While making an API call, at that time it makes $scope.data.vacancy value as a blank array ([]) and once server respond with response, it fills that object with response received by server. Behind the scene it only updates the value of $object property which automatically update $scope.data.vacancy value.
Same behaviour is there in $resource of ngResource.
I wanted to also put down that when you're chaining promise, that time you have to explicitly handle error case. Whereas in current code you haven't handle such failure condition. So I'd suggest you to go for that as well by adding error function inside Restangular REST API call. and do use $q.reject('My error data, this can be object as well').

You are making a async call to get the result. So you need either a callback or promise to handle this. One option with minimum code change is to make the service to return promise and in the controller get the result via then
.service('CareersService', ['Restangular', '$sce', function(Restangular, $sce) {
var vacancies = [];
var result;
this.getVacancies = function() {
Restangular.all('job_posts').getList({
active: 'true'
}).then(function(job_posts) {
job_posts.forEach(function(job_post) {
vacancies.push(_.pick(job_post, ['id', 'title', 'min_experience', 'max_experience', 'location']));
})
})
return vacancies;
}
this.getVacancy = function(job_id) {
return Restangular.one('job_posts', job_id).get().then(function(job_post) {
result = _.pick(job_post, 'title', 'min_experience', 'max_experience', 'location', 'employment_type', 'description');
var safe_description = $sce.trustAsHtml(result.description);
var emp_type = _.capitalize(result.employment_type);
_.set(result, 'description', safe_description);
_.set(result, 'employment_type', emp_type);
return result;
});
}
}]).controller('DetailsCtrl', ['$scope', '$stateParams', 'CareersService', function($scope, $stateParams, CareersService) {
$scope.data.vacancy = {
title: 'Loading ...',
contents: ''
};
CareersService.getVacancy($stateParams.job_id).then(function(result) {
$scope.data.vacancy = result;
});
}])

You are doing return outside of then try to move it inside in then function
this.getVacancies = function() {
Restangular.all('job_posts').getList({active: 'true'}).then(function(job_posts){
job_posts.forEach(function(job_post){
vacancies.push(_.pick(job_post,['id','title','min_experience','max_experience','location']));
})
return vacancies;
})
}

How to display json from server after success?

I am creating a login controller on Angular and I have a factory service in which I send a post request and return json data. When I console.log the success data I can see an object however when i try to access the properties I am getting undefined.
UserAuthFactory.login(name,password)
.success(function(data){
console.log(data.token);
AuthenticationFactory.token = data.token;
console.log(data);
}).error(function(status){
console.log('oops something went wrong.');
});
};
in my console.log
Object {success: true, message: "Enjoy Your Token!", token:
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1N…jowfQ.Hcfejg7x7W4w01fBaf303I2iJ57T38e84vLtGDiwSHI"}
message: "Enjoy Your Token!"success: truetoken:
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NjUzODEyNjg2NzFhM2JhMmQ2NTQ4NjgiLCJuYW1lIjoiTmljayBHbG9uYXJpcyIsInBhc3N3b3JkIjoicGFzc3dvcmQiLCJhZG1pbiI6dHJ1ZSwiX192IjowfQ.Hcfejg7x7W4w01fBaf303I2iJ57T38e84vLtGDiwSHI"proto:
Object app.js:121 undefined
How can I then access the different properties of the array? Properties such as token, message, etc?

If you want to access that data in HTML part, refer to my example code.
I did use $scope, $http module.
example.controller('Example', function( $scope, $http ) {
$scope.token = '';
$scope.message = '';
$scope.etc = null;
$scope.getToken = function() {
var reqParams = { id: 'userid', password: 'owije3wefo' };
$http.post('getToken', reqParams ).then( function( res ) {
console.log( res.data );
this.result = res.data.token;
this.message = res.data.message;
this.etc = res.data.etc;
}.bind(this));
};
});
In html,
<div ng-controller="Example">
<div>
<span class="label">token</span>
<input ng-model="token" type="text" />
</div>
</div>

When you have a JSON object you should only convert it with the function
JSON.parse(text)
For example
var json_object = JSON.parse(json_string);
console.log(json_object.parameter);

Angularjs not loading json files

I'm not sure why when i print the json file on a html page works, also from a button calling a function, but not inside of the javascript file.
This a problem because i need to sort the data in the json file before displaying it from in the web page, i can't make it work. i tried using this solution https://stackoverflow.com/a/15463124/2796268,
but the console say
jsonDat is not defined
my code:
$scope.init = function () {
console.log("init");
$http.get('json/file.json') .success(function(data) {
$scope.jsonDat = res.data;
})
.error(function(data,status,error,config){
$scope.jsonDat = [{heading:"Error",description:"Could not load json data"}];
});
console.log(jsonDat);
};
How i can process the json data before the page loads or when the page is loading?

You can process the data when it is returned from $http, like so:
$scope.init = function () {
$http.get('json/file.json').success(function(data) {
//---- SORT HERE ----
$scope.jsonDat = mySortFunction(data);
});
};

Try this :
$scope.init = function() {
console.log("init");
$http.get('json/file.json').success(function(data) {
$scope.jsonDat = data;
console.log($scope.jsonDat);
})
.error(function(data, status, error, config) {
$scope.jsonDat = [{
heading: "Error",
description: "Could not load json data"
}];
console.log($scope.jsonDat);
});
};
In success you have data but you try get from res.data. When you use success then it is not response with data but only your data.

I thought you wanna sort some JSON file then display it in HTML page . So My Idea is get that JSON file (you tried)
$http.get('json/file.json') .success(function(data) {
$scope.jsonDat = data.res;
console.log('Checking the result',angular.toJson($scope.jsonDat));
})
But putting your result in
$scope.jsonDat = data.res;
eg,
sortService.sortJsn = data.res;
$scope.jsonDat instead create angular service pour your data there then you can access those data any where in your controller sort it also show it in HTML.

How do I delete fileds in request object in angularjs

I make request to server from angularjs controller to get an object and I want to delete a field in the object before view displays it. Folloiwng is my code
$scope.findOne = function() {
$scope.order = Orders.get({
orderId: $stateParams.orderId
});
delete $scope.order._id;
console.log(JSON.stringify($scope.order));
};
it prints
{"$promise":{},"$resolved":false}
it doesn't delete the id field. My view shows even _id of my object. How do I delete that field?
Following is my services file
'use strict';
//Orders service used for communicating with the orders REST endpoints
angular.module('orders').factory('Orders', ['$resource',
function($resource) {
return $resource('orders/:orderId', {
orderId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}
]);
When I change findOne() to
$scope.findOne = function() {
Orders.get({
orderId: $stateParams.orderId
}).success(function(res)//(this is line number 56)
{
delete res.data._id;
$scope.order = res.data;
});
};
I get this error in console
TypeError: undefined is not a function
at Scope.$scope.findOne (http://localhost:3000/modules/orders/controllers/orders.client.controller.js:56:14)
at http://localhost:3000/lib/angular/angular.js:10903:21
at Scope.$eval (http://localhost:3000/lib/angular/angular.js:12811:28)
at pre (http://localhost:3000/lib/angular/angular.js:20125:15)
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:6732:13)
at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:6146:13)
at publicLinkFn (http://localhost:3000/lib/angular/angular.js:6042:30)
at http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3905:9
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:6752:13)
at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:6146:13) <section data-ng-controller="OrdersController" data-ng-init="findOne()" class="ng-scope">angular.js:10126 (anonymous function)

The Orders.get function returns a promise, having this in mind your code should look something like this:
Orders.get({orderId: $stateParams.orderId}).then(function(order) {
delete order._id;
$scope.order = order;
});
Hope this helped,
let me know.
Cheers!

get by default returns a promise object. The way to do this is
$scope.findOne = function() {
Orders.get({
orderId: $stateParams.orderId
}).success(function(res)
{
delete res.data._id;
$scope.order = res.data;
});
};

I changed the function to
$scope.findOne = function() {
var order = Orders.get({
orderId: $stateParams.orderId
}, function()
{
order.order_type = 'new';
});
$scope.order = order;
};
and it worked. I wonder if the syntax is changed in angularjs update. Similar syntax is mentioned in https://docs.angularjs.org/api/ngResource/service/$resource. Though I could not figure out the reason other answers with success callback didn't work .

Develop Reference

JavaScript is the programming language of the Web.

How to get a variable from the Angular controller to a view - javascript

Try something like this: $scope.onSubmit = function() { var json = $.post('http://162.243.232.223:3000/api/query', { 'input': 'my_input' }); json.done(function(result){ $scope.result = result; $scope.$apply(); }) console.log(json); $scope.queries = json; }; } <div>{{result}}</div>

Related

returning image/jpeg as arraybuffer or blob

working with deferred results in angularjs

How to display json from server after success?

Angularjs not loading json files

How do I delete fileds in request object in angularjs

Categories

Resources