How to output json data in controller in angularjs

Question

I am learning angularjs and i want to ouput some json data on console.

I am doing something like this

$scope.events = events.query();

but when i print on the console

console.log($scope.events);

it gives me the output like

Array []

how can i print the data like this

[
  {"id":18,"file":{"url":"/uploads/playlist/file/18/01_-_MashAllah.mp3"},"event_id":23,"created_at":"2015-11-11T10:33:52.000Z","updated_at":"2015-11-11T10:33:52.000Z","name":"01 - MashAllah.mp3"}, 
  {"id":19,"file":{"url":"/uploads/playlist/file/19/02_-_Laapata.mp3"},"event_id":19,"created_at":"2015-11-11T10:50:01.000Z","updated_at":"2015-11-11T10:50:01.000Z","name":"02 - Laapata.mp3"}
]

below is my whole code

.controller('ShowEventsCtrl', ['$scope','events', function($scope,events) {

  $scope.events = events.query();
  console.log($scope.events);

 }]);

services

angular.module('myApp')
.factory('events', ['$resource',function($resource) {
    return $resource('/events', {},{
        query: { method: 'GET', isArray: true },
        create: { method: 'POST' }
    })
}])

and when i print the data in html like this

<div ng-repeat="playlist in playlists">
  {{playlist}}
</div>

I get the correct output so i but how to output it in console.

@RahulDesai when i print the same in html it gives me the correct output — chandradot99
– chandradot99, Commented Nov 13, 2015 at 2:49
Please show all code context. It sounds like you have an asynchronous operation fetching data and are trying to log the data before it is received — charlietfl
– charlietfl, Commented Nov 13, 2015 at 2:52
$resource is asynchronous, you need to use callback to access your data — charlietfl
– charlietfl, Commented Nov 13, 2015 at 3:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

Because your events.query() method is asynchronous, you need to log stuff after the action is resolved. Easiest way I can think of is

$scope.events = events.query(function(events) {
    console.log(events);
});

From $resource

The action methods on the class object or instance object can be invoked with the following parameters:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

...

Success callback is called with (value, responseHeaders) arguments

I'm guessing your confusion comes from this feature of $resource

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

You see the correct data in your template because once the data is returned from the server, a scope digest is triggered and your template is updated.

Collectives™ on Stack Overflow

How to output json data in controller in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related