CODEWITHSUNDEEP
angularjsangular-resourceresolve
Shri
Shri

Reputation: 834

AngularJs - factory: read the data fetched using $resource and return some part of it

In my factory, how to extract(read) data from the .json file before returning to the calling function from a directive?

Here is the definition of my factory

(function () {
    "use strict";

    angular
        .module("common.services")
        .factory("langService", ["$resource", langService])

    function langService($resource) {

        var langData = $resource('services/langInfo.json').query();

        function getInfo(language){
            /*look for a specific code from langData and return*/
        }

        return {
            getInfo: getInfo
        }
    }
}());

getInfo() is the function that is supposed to lookup for the appropriate info from langData variable and return it.

here is the json data from langInfo.json (not complete yet): 

[{
  "marathi": { },
  "hindi": { },
  "konkani": { },
  "sanskrit": { },
  "gujarati": { }
}]

I am new to AngularJs hence need help. I suppose langData is not resolved as I tried printing it with console.log, hence I am not able to access it. This is what i got with

console.log(langData)

: enter image description here

By the way what I am trying to do is possible? How?

EDIT:

according to Stian Sandve's answer, I passed a call back function at the call to langService as:

langService.getInfo('langCode', function(data) {
    console.log(data);
});

and changed the definition of getInfo to 

function getInfo(language, callback){
    langData.query(function(data) {
        var filteredData = filter(data); //assume filter() is defined
        callback(filteredData);
    });
}

So I am getting the data in callback function. But I need to set it to some variable that is declared before the call to langService.getInfo. So something like this: 

var langInfo
langService.getInfo('langCode', function(data) {
    console.log(data);
    //set data to langInfo
});

Upvotes: 0

Views: 277

Answers (2)

Alok
Alok

Reputation: 1310

When you do a query, it returns you a promise (the $promise you see in the console log.) In essence, promise has the data that gets returned. 

var langData = [];
$resource('services/langInfo.json').query(function(data){langData = data;});

You can look into waiting for a promise to be executed but then you will be missing out on the beauty of angular.

What I will do is:

$resource('services/langInfo.json').query(function(data){return data;});

and then do the filtering when you have received the data.

Alternatively, have a look at https://lodash.com/ It is more like linq on the angular side.

Upvotes: 2

Stian Sandve
Stian Sandve

Reputation: 540

You need to process the data after the promise has been resolved. According to the AngularJS documentation:

Success callback is called with (value, responseHeaders) arguments, where the value is the populated resource instance or collection object. The error callback is called with (httpResponse) argument.

To simplify the example, we do not perform any error checking (only the success callback is used).

(function () {
    "use strict";

    angular
        .module("common.services")
        .factory("langService", ["$resource", langService])

    function langService($resource) {

        var filter = function(data) {
            // filter logic
        };

        var langData = $resource('services/langInfo.json');

        function getInfo(language, callback){
            langData.query(function(data) {
                var filteredData = filter(data);
                callback(filteredData);
            });
        }

        return {
            getInfo: getInfo
        }
    }
}());

And then you can call the function like this from your directive:

var response = {};
langService.getInfo('langCode', function(data) {
    console.log(data);
    response = data;
});

Upvotes: 1

Related Questions