A guide on handling and presenting an array of objects using AngularJS

Question

A guide on handling and presenting an array of objects using AngularJS

I am currently working on a project where I have a large array of objects that need to be filtered, processed, and then displayed to the user. The application is built using node-webkit and I am using AngularJS and jQuery for routing, DOM manipulation, and other functionalities.

Here is the .state configuration:

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

The data for the objects is stored in FooBarData.js:

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
    }, {}, {}, ];
}

I have hit a roadblock when it comes to filtering based on the source property and displaying only the relevant information in the views. I have attempted to incorporate filtering logic within the .state using resolve, but I am unsure of how to access the filtered data afterwards. Here is how the updated .state looks:

.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 challenge arises when attempting to instantiate and 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 create new copies of the filtered objects for retrieval? I feel like I might be overcomplicating things. If you agree, what would be a simpler approach?
Is it better to utilize FooBarController (currently empty) instead of FooBarFactory? And would the process for accessing objects remain the same?
When displaying a property like fooName of an object, should I use
```
{{FooBarFactory.fooStuff.fooName}}
```
?

Note: I believe this post does not fit CodeReview as I have some issues I am trying to tackle, and I have provided as much detail as possible.

javascript arrays angularjs node-webkit

Answer 1

Answer №1

Initially, it may be a bit challenging to grasp the exact question you are posing.

Additionally, the following snippet is not valid JavaScript:

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

Revising my previous response. You can leverage lodash or other methods to filter objects with keys "foo" or "bar" and store them in separate arrays within a service (factory). These arrays can then be accessed in your scope when necessary:

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

This approach can be easily adapted for use in your resolves too. I hope this proves to be useful.

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

Lastly, include the following 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>

Answer 2

Initially, it may be a bit challenging to grasp the exact question you are posing.

Additionally, the following snippet is not valid JavaScript:

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

Revising my previous response. You can leverage lodash or other methods to filter objects with keys "foo" or "bar" and store them in separate arrays within a service (factory). These arrays can then be accessed in your scope when necessary:

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

This approach can be easily adapted for use in your resolves too. I hope this proves to be useful.

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

Lastly, include the following 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>

A guide on handling and presenting an array of objects using AngularJS

Answer №1

Similar questions

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

Tips for circumventing the ajax data size restriction in asp.net mvc3

Is the jQuery ajax .done() function being triggered prematurely?

Tips for increasing the height of a Kendo-UI grid to 100% within an AngularJS 1.x environment

CSS3 transition applied to a jQuery direction-aware hover effect

Removing a portion of an item with the power of RxJS

How can I add a hyperlink to a Javascript string array?

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Performing mathematical operations in JavaScript, rounding to the nearest .05 increment with precision up to two

Is there a method available to retrieve the data values stored within these objects?

The server was unable to start because NPM was unable to navigate to the wrong directory and locate the package.json file

Having trouble uploading my confidential npm package to a secure Nexus repository

Utilizing a dynamic form action connected to an Express route

Dynamic TextField sizing

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Display: Show view once forEach loop finishes execution

What is the process of transforming an object type into a two-dimensional array using lodash?

Having trouble removing items from the data grid list in react material-ui, any thoughts on what might be causing the issue?

The MUI Slide Transition experiences a malfunction when using multiple Slide components simultaneously

The calculator is generating console logs, but there is no output appearing on the display