[AngularJS] $resource GET: how to get the JSON array?

[r***@out-side.nl]

I am new to Angular and have created a factory for the reading of a
standard json file.
My controller fires the factory successful but at some point my json array
is transformed into an Object and i can't figure out why?

I tried many forum solutions from the web, but none worked as expected.

var jamboApp = angular.module('jambo', ['ngResource'])

.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])

.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data); // output: m { thedata=[336], $promise=d,
$resolved=true, more...}
console.log(data.thedata); // output: [[1167692400000, 61.05],
[1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31]]
return data.thedata;
});
console.log('myTest here is:'+myTest); // output: myTest here
is:[object Object]
console.log('myTest here is:'+myTest.thedata); //output: myTest here
is:undefined
$scope.chartData=myTest;
console.log('chartdata here is:'+$scope.chartData.toSource()); //
output: chartdata here is:({$promise:{$$state:{status:0}}, $resolved:false})

.......... /// rest of my controller

})

===================================================================================
Customers.php contains a basic json set:

{"thedata":[[1167692400000, 61.05], [1167778800000, 58.32], [1167865200000,
57.35], [1167951600000, 56.31]]}

[Kiran A]

Change your console to

console.log(myTest,myTest);

Post by r***@out-side.nl
I am new to Angular and have created a factory for the reading of a
standard json file.
My controller fires the factory successful but at some point my json array
is transformed into an Object and i can't figure out why?
I tried many forum solutions from the web, but none worked as expected.
var jamboApp = angular.module('jambo', ['ngResource'])
.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])
.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data); // output: m { thedata=[336], $promise=d,
$resolved=true, more...}
console.log(data.thedata); // output: [[1167692400000, 61.05],
[1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31]]
return data.thedata;
});
console.log('myTest here is:'+myTest); // output: myTest here
is:[object Object]
console.log('myTest here is:'+myTest.thedata); //output: myTest here
is:undefined
$scope.chartData=myTest;
console.log('chartdata here is:'+$scope.chartData.toSource()); //
output: chartdata here is:({$promise:{$$state:{status:0}}, $resolved:false})
.......... /// rest of my controller
})
===================================================================================
{"thedata":[[1167692400000, 61.05], [1167778800000, 58.32],
[1167865200000, 57.35], [1167951600000, 56.31]]}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
Thanks and Regards,
*Kiran A*

[wax miguel]

---------- Forwarded message ----------
From: <***@out-side.nl
<javascript:_e(%7B%7D,'cvml','***@out-side.nl');>>
Date: Tuesday, 15 March 2016
Subject: [AngularJS] $resource GET: how to get the JSON array?
To: AngularJS <***@gmail.com>


I am new to Angular and have created a factory for the reading of a
standard json file.
My controller fires the factory successful but at some point my json array
is transformed into an Object and i can't figure out why?

I tried many forum solutions from the web, but none worked as expected.

var jamboApp = angular.module('jambo', ['ngResource'])

.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])

.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data); // output: m { thedata=[336], $promise=d,
$resolved=true, more...}
console.log(data.thedata); // output: [[1167692400000, 61.05],
[1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31]]
return data.thedata;
});
console.log('myTest here is:'+myTest); // output: myTest here
is:[object Object]
console.log('myTest here is:'+myTest.thedata); //output: myTest here
is:undefined
$scope.chartData=myTest;
console.log('chartdata here is:'+$scope.chartData.toSource()); //
output: chartdata here is:({$promise:{$$state:{status:0}}, $resolved:false})

.......... /// rest of my controller

})

===================================================================================
Customers.php contains a basic json set:

{"thedata":[[1167692400000, 61.05], [1167778800000, 58.32], [1167865200000,
57.35], [1167951600000, 56.31]]}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to angular+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[r***@out-side.nl]

I don't know what the point was for questioning the output of console.log(myTest,myTest);"

m { $promise=d, $resolved=false, toJSON=function(), more...} m { $promise=
d, $resolved=false, toJSON=function(), more...}
I am new to Angular and have created a factory for the reading of a
standard json file.
My controller fires the factory successful but at some point my json array
is transformed into an Object and i can't figure out why?
I tried many forum solutions from the web, but none worked as expected.
var jamboApp = angular.module('jambo', ['ngResource'])
.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])
.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data); // output: m { thedata=[336], $promise=d,
$resolved=true, more...}
console.log(data.thedata); // output: [[1167692400000, 61.05],
[1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31]]
return data.thedata;
});
console.log('myTest here is:'+myTest); // output: myTest here
is:[object Object]
console.log('myTest here is:'+myTest.thedata); //output: myTest here
is:undefined
$scope.chartData=myTest;
console.log('chartdata here is:'+$scope.chartData.toSource()); //
output: chartdata here is:({$promise:{$$state:{status:0}}, $resolved:false})
.......... /// rest of my controller
})
===================================================================================
{"thedata":[[1167692400000, 61.05], [1167778800000, 58.32],
[1167865200000, 57.35], [1167951600000, 56.31]]}

[Kiran A]

in console you can get Array within that OBJECT

Post by r***@out-side.nl
I don't know what the point was for questioning the output of console.log(myTest,myTest);"

m { $promise=d, $resolved=false, toJSON=function(), more...} m { $promise
=d, $resolved=false, toJSON=function(), more...}
I am new to Angular and have created a factory for the reading of a
standard json file.
My controller fires the factory successful but at some point my json
array is transformed into an Object and i can't figure out why?
I tried many forum solutions from the web, but none worked as expected.
var jamboApp = angular.module('jambo', ['ngResource'])
.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])
.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data); // output: m { thedata=[336], $promise=d,
$resolved=true, more...}
console.log(data.thedata); // output: [[1167692400000, 61.05],
[1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31]]
return data.thedata;
});
console.log('myTest here is:'+myTest); // output: myTest here
is:[object Object]
console.log('myTest here is:'+myTest.thedata); //output: myTest here
is:undefined
$scope.chartData=myTest;
console.log('chartdata here is:'+$scope.chartData.toSource()); //
output: chartdata here is:({$promise:{$$state:{status:0}}, $resolved:false})
.......... /// rest of my controller
})
===================================================================================
{"thedata":[[1167692400000, 61.05], [1167778800000, 58.32],
[1167865200000, 57.35], [1167951600000, 56.31]]}

--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
Thanks and Regards,
*Kiran A*

[r***@out-side.nl]

main problem is not how to print something on the console. That works fine.

I want to get the received json data into a variable that my controller can
use further.

Whatever i try, everything inside a function works correct inside the
controller but outside this function i still end up with the stupid Object
instead of a json array.
.factory('jamboFactory',['$resource',function($resource){
return $resource('customers.php', {}, {
query: {method:'GET', isArray:false }
});
}])

.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data.thedata); // output: JSON ARRAY!
return data.thedata; // should return JSON ARRAY
});
console.log('myTest here is:'+myTest); // freaking Object

[Sander Elias]

Hi Roe...,

Post by r***@out-side.nl
Whatever i try, everything inside a function works correct inside the
controller but outside this function i still end up with the stupid Object
instead of a json array.

Euhm, yes, that is how async programming works..
var myTest= jamboFactory.query(function(data){
//this code runs AFTER the controller function is done, and after the
async request has ended.
console.log(data.thedata); // output: JSON ARRAY! // yep, it works.. :)

scope.result = data.theData; // once you hook your data to the scope,
you can use it in your view!

return data.thedata; //this return will fire in the future, and
basically does nothing for you!
});
console.log('myTest here is:'+myTest); // freaking Object. //That is
correct as this code runs BEFORE the query callback, it holds a reference
to the promise the jamboFactory.query() produces


I hope this helps you a bit,
Regards
Sander

[r***@out-side.nl]

Hi Sander,

Thank you very much for your help.
You Wrote the line :

scope.result = data.theData; // once you hook your data to the scope, you

Post by Sander Elias
can use it in your view!

( i asume you meant $scope ? )

But outside this var myTest=..... $scope result is empty again.
I have tested code with ".promise", ".succes" and many many other things.

[Sander Elias]

Hi Roe,

It's not empty. It is not there yet. That code is executed before the data
is even being fetched. You can't use data that is not there yet. If you
must execute code after the data has come in, put it inside your query
callback function.

and yes, I meant to type $scope.

[r***@out-side.nl]

Thanks Sander

Main problem is, how to use the data when it had been read?
I have changed the controller in multiple ways but if you look at the cpde
below, it has 2 "this." lines at the end.

.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data.thedata); // output: JSON ARRAY!
return data.thedata; // should return JSON ARRAY
});
/*
* multiple lines with great code
*/
this.flotChartData = ChartData;
this.flotBarOptions = barOptions;

});

The 2 variables at the end "this.flotChartData" and "this.flotBarOptions"
canb be used in my view with jamboCtrl.flotChartData and jamboCtrl.flotBarOptions.

But if i rewrite the code to:
.controller('jamboCtrl', function($scope,jamboFactory) {
var myTest= jamboFactory.query(function(data){
console.log(data.thedata); // output: JSON ARRAY!
return data.thedata; // should return JSON ARRAY
//}); REMOVED THIS
/*
* multiple lines with great code
*/
this.flotChartData = ChartData;
this.flotBarOptions = barOptions;
}); // and PASTED HERE
});

Then all reference to flotChartData, flotBarOptions and myTest is gone in
the view.

Post by Sander Elias
Hi Roe,
It's not empty. It is not there yet. That code is executed before the data
is even being fetched. You can't use data that is not there yet. If you
must execute code after the data has come in, put it inside your query
callback function.
and yes, I meant to type $scope.