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

Question

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)

:

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
});

Angular is working asyncronly so thats not the way it will work. Found an good example on how to load json data in angular here: http://stackoverflow.com/a/16931623/2422125 — Fabian N., Feb 17 '16 at 11:44

Alok · Answer 1 · 2016-02-20T18:21:49.503

2

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.

edited Feb 20 '16 at 18:21

answered Feb 17 '16 at 11:45

Alok

1,290
1
11
21

the first thing you mentioned didn't work. console shows [] still. second thing i didn't understand; where will it return the data? if you mean to say "var langData = $resource('services/langInfo.json').query(function (data) { return data; });" then that too didn't work – Shri Feb 17 '16 at 12:20
Try this: var langData = [];$resource('services/langInfo.json').get(function(data){console.log(data); langData = data;}); – Alok Feb 17 '16 at 13:22
that won't work. well, as Stian explained, i need to pass a callback function from from where i am calling "langService.getInfo" method – Shri Feb 18 '16 at 06:15

Stian Sandve · Answer 2 · 2016-02-19T13:19:43.307

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;
});

wait.. in the callback function i got the data. but how to i set it to a variable? say the variable is declared before the call to api. var response; langService.getInfo('langCode', function(data) { console.log(data); }); — Shri, Feb 18 '16 at 06:22

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

2 Answers2