How to process and display an array of objects in AngularJS

Question

I have a big array of objects that need to be filtered, processed and then displayed to the end user. The application is developed on top of node-webkit and I use AngularJS, jQuery for routing, DOM manipulation etc.

Here is the .state:

.state('foo.bar', {
    url: '/fooBar',
    templateUrl: 'js/Modules/FooBar/Templates/FooBar.html',
    controller: FooBarController,
})

FooBarData.js contains the big array of objects:

angular.module('fooApp').factory('FooBarData', function () {
    var fooBarArray = [{
        source: "foo",
        id: 'foo_1',
        pid: 'fooBar_1',
        number: 550,
        fooSign: "ASD",
        fooName: "XCV",
        url: "../foo/bar.fbr",
        aFlag: false
    }, {}, {}, ];
}

Where am I stuck? Well, the source property is either foo or bar and I will switch between the two views: when I press foo, I will only display properties related to the objects that are foo and vice-versa.

I have tried sneaking the filtering part inside .state using resolve, but I don't know how to access them after that. Thus, the .state would look like this:

.state('foo.bar', {
    url: '/fooBar',
    templateUrl: 'js/Modules/FooBar/Templates/FooBar.html',
    controller: FooBarController,
    resolve: {
        Foo: function (FooBarFactory, FooBarData) {
            var fooArray = [];
            $.each(FooBarData, function (index, value) {
                if (value.filter == 'foo') {
                    var aFoo = new FooBarFactory.FooStuff(value);
                    fooArray.push(aFoo);
                }
            });
            return fooArray;
        },
        Bar: function (FooBarFactory, FooBarData) {
            var barArray = [];
            $.each(FooBarData, function (index, value) {
                if (value.filter == 'bar') {
                    var aBar = new FooBarFactory.BarStuff(value);
                    barArray.push(aBar);
                }
            });
            return barArray;
        }
    }
})

The problem appears when I try to instantiate (and then access) FooStuff() and BarStuff() from FooBarFactory:

angular.module('fooApp').factory('FooBarFactory', function ($scope) {

    var fooStuff = function (foo) {
        this.source = foo.source;
        this.id = foo.id;
        this.pid = foo.pid;
        this.number = foo.number;
        this.fooSign = foo.fooSign;
        this.fooName = foo.fooName;
        this.url = foo.url;
        this.aFlag = foo.flag;
    };

    /*var barStuff = function (bar)
        same thing here*/ 

    return {
        fooStuff(FooBarData.fooBarArray): fooStuff,
        BarStuff(FooBarData.fooBarArray): barStuff
    }
});

• Should I retrieve the filtered objects by creating new copies of them? I feel like I'm complicating things too much. If you agree with that, how should I do it instead?
• Should I use the FooBarController (which is empty at the time of speaking) instead of FooBarFactory? If yes, will the process of accessing the objects be the same?
• If I need to display, for example, the property fooName of an object, will I use {{FooBarFactory.fooStuff.fooName}}?

---

Note: I don't think this post should be submitted to CodeReview, I have quite a few issues, yet I tried to be as specific as I can.

Answer 1

Firstly it is hard to process exactly what you are asking.

Secondly this not valid js:

return {
    fooStuff(FooBarData.fooBarArray): fooStuff,
    BarStuff(FooBarData.fooBarArray): barStuff
}

Editing my previous answer here. You can use lodash to other methods to filter all objects with a key of "foo" or "bar" and add them to their own new arrays in some service (factory). Then you can retrieve them in your scope when you need them:

http://plnkr.co/edit/NZkecjcf6cYWa0jQPzqF?p=preview

You could easily adjust this pattern for use in your resolves as well. Hope it helps.

.controller('MainController', function($scope, Processor, FooBarData) {
  var foos = Processor.process(FooBarData.data, 'foo');
  var bars = Processor.process(FooBarData.data, 'bar');
  $scope.foos = Processor.getData('foo');
  $scope.bars = Processor.getData('bar');
})

.factory('Processor', function () {

    var p = {};
    p.data = {
      foo: [],
      bar: []
    };

    p.process = function(data, keyword){
      p.data[keyword].push(_.filter(data, {source: keyword}));
    }

    p.getData = function(name){
      return _.flatten(p.data[name]);
    }

    return p;
})

And of course in your template:

  <body ng-controller="MainController">
    <h1>FOO items</h1>
    <p ng-repeat="foo in foos"> {{ foo.fooName }}</p>

   <h1>Bar items</h1>
    <p ng-repeat="bar in bars"> {{ bar.fooName }}</p>
  </body>