Yeah, that's the same thing. What you want is:
$scope.loadModels = function () {
var httpRequest =
$http.post('AngularWithWebServices.aspx/FetchJVCModelsB',
{ data: {} })
.success(function (data, status, headers, config) {
// THIS code executes *much* later.
$scope.models = data;
list = data;
console.log($scope.models);
console.log(list);
}).error(function (data, status, headers, config) {
console.log('Error:', data);
});
};
$scope.loadModels();
console.log($scope.models) // == undefined
// AT THIS point in execution, list is still empty and $scope.models is
undefined. That's because the async $http call returns a promise, and the
.success callback will *never* have been executed yet. It waits until after
this block exits and gets called at a future time.
The important, very, very, very important part about working with stuff in
javascript is understanding how asynchronous calls work. JS is
single-threaded and non-blocking, so $http.post returns immediately
(without waiting for the post to actually happen), and will resolve the
promise (and call the .success functions) some time in the future. I have
promises in my code that can take literally minutes to resolve (if
$http.get returns a 401, I push into the login/register flow, and
eventually resolve the gotten profile information data from the original
request with the appropriate data).
So any code that deals with any kind of data coming off of a $http call or
any other eventual/promise/async has to be inside the .success block.
That's where you parse the incoming data and assign it to the scope. At
that point, you've got the incoming data and just need to attach it
properly to your scope. The good news is (as I understand it), angular
naturally handles $scope.$apply calls when you're doing data from a $http
call, so you don't have to manually trigger a digest the way you would have
if the async promise were coming from a different source.
e
On Wed, Jun 18, 2014 at 5:53 PM, <[email protected]> wrote:
> *UPDATE: *I simplified it so it doesn't use the factory/service. But
> when I try to output the data it's empty. Please see below.
>
> (Tried using both of these:)
> $scope.models = [];
> var list = {};
>
> $scope.loadModels = function () {
> var httpRequest =
> $http.post('AngularWithWebServices.aspx/FetchJVCModelsB', { data: {} })
>
> .success(function (data, status, headers, config) {
> $scope.models = data;
> list = data;
>
> }).error(function (data, status, headers, config) {
> console.log('Error:', data);
> });
>
> };
>
> $scope.loadModels();
> console.log($scope.models);
> console.log(list);
> //console.log(list.typeOf());
>
> $.each(list.d, function (i, val) {
> console.log(val.ModelNum);
> });
>
>
>
>
> On Wednesday, June 18, 2014 6:04:38 PM UTC-5, [email protected] wrote:
>>
>> var data = [{"ModelNum":"KD-A305","Year":"2008","Price":129.95,"Pic":"
>> kd-a305prodPic3.jpg"},{"ModelNum":"KD-A315","Year":"
>> 2010","Price":129.95,"Pic":"KD-A315prodPic1.jpg"}]
>>
>> When I use this variable everything works in Angular.
>>
>>
>> But when I try stuffing it in a $scope:
>>
>> var data = JSON.parse($scope.jvcModels);
>>
>> Error: JSON.parse: unexpected character at line 1 column 2 of the JSON
>> data
>>
>>
>> Service
>>
>> $scope.jvcModels = myDataService.FetchJVCModels();
>>
>> Factory
>>
>> app.factory('myDataService', function ($http,$q) {
>>
>> return {
>>
>> FetchJVCModels: function () {
>>
>> //var promise =
>> $http.post('AngularWithWebServices.aspx/FetchJVCModels',
>> { data: {} }).then(function (response) {
>> var promise =
>> $q.all($http.post('AngularWithWebServices.aspx/FetchJVCModelsB',
>> { data: {} }).then(function (response) {
>>
>> //console.log(response);
>>
>> return response.data;
>> }));
>>
>> return promise;
>>
>> },
>>
> --
> 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 [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
