Using AngularJS: Verify the presence of a key/value pair in an object and create an array of objects

Question

Using AngularJS: Verify the presence of a key/value pair in an object and create an array of objects

My current service method retrieves income data from different projects and creates a new array of objects. I am seeking assistance to sort this array by year and trimester in order to simplify looping through it using ng-repeat in the view.

The data structure I have returned by Incomes.buildAndGetIncomes() is as follows:


[
    {
        "projectName": "Deuxième test",
        "clientName": "Deuxième client",
        "typeIncome": "Accompte",
        "amount": 1000,
        "date": "2014-09-10",
        "notes": "Cheque / LDD",
        "trim": "third",
        "year": "2014"
    },
    // More income objects...
]

I want the desired data structure to be organized by year and trimester like this:


[  
    {
        year: 2014,
        trim: [
            {
                name : 'first',
                content : [
                    // some content
                ]
            },
            // More trimesters...
        ]
    },
    // More years...
]

Currently, I have a method called `trimestral` that attempts to achieve this sorting functionality. However, I am facing challenges with accurately checking for existing years and trimesters within the data structure.

This implementation checks if it's the first index of the loop and adds the year/trimester/content accordingly. While this works for that scenario, I struggle with handling cases where the year or trimester already exists. Any guidance on improving this logic would be greatly appreciated!

javascript arrays angularjs

Answer 1

Answer №1

If you want to achieve this functionality without creating complex nested loops, you can consider utilizing underscore.js library. Using underscore.js, the code becomes more manageable and easier to follow. Here's an example of how you can accomplish this...

var quarterlyData = _(incomes).chain()
    .groupBy('year')
    .map(function (items, year) {
        return {
            year: year,
            quarters: _(items).chain()
                    .groupBy('quarter')
                    .map(function(content, quarter) {
                        return {
                            quarter: quarter,
                            data: content
                        };
                    })
                    .sortBy(function(i) { 
                        var quartersOrder = {
                            Q1: 1,
                            Q2: 2,
                            Q3: 3
                        };
                        return quartersOrder[i.quarter];
                    }).value()
        };
    })
    .sortBy('year')
    .value();

Check out the Live Demo here!

Answer 2

If you want to achieve this functionality without creating complex nested loops, you can consider utilizing underscore.js library. Using underscore.js, the code becomes more manageable and easier to follow. Here's an example of how you can accomplish this...

var quarterlyData = _(incomes).chain()
    .groupBy('year')
    .map(function (items, year) {
        return {
            year: year,
            quarters: _(items).chain()
                    .groupBy('quarter')
                    .map(function(content, quarter) {
                        return {
                            quarter: quarter,
                            data: content
                        };
                    })
                    .sortBy(function(i) { 
                        var quartersOrder = {
                            Q1: 1,
                            Q2: 2,
                            Q3: 3
                        };
                        return quartersOrder[i.quarter];
                    }).value()
        };
    })
    .sortBy('year')
    .value();

Check out the Live Demo here!

Answer 3

Answer №2

After seeking help from a skilled web developer friend, I learned the process can be simplified into two steps: constructing the object and then formatting it as needed.

Here's what I ended up doing:

self.trimestral = function(){
  var deferred = $q.defer();
  var global = [];
  self.buildAndGetIncomes().then(function(result) {
    var trimestral = {};

    var incomes = result;

    // First loop, construct the object
    angular.forEach(incomes, function(income, i){
      var year = income.year,
          trim = income.trim,
          newTrim = {},
          newTrimContent = {};          
          if(trimestral[year] === undefined){
            trimestral['year' , year] = {};

          }
          if(trimestral[year][trim] === undefined) {
            trimestral[year][trim] = [];               
          }
           trimestral[year][trim].push(income);        

    });

   deferred.resolve(global);

   // Second loop, format the data
    for ( prop in trimestral ) {          
      newYear = {};
      newYear.name = prop;
      newYear.content = [];          
      for ( trim in trimestral[prop]){
        newTrim = {};
        newTrim.name = trim;
        newTrim.content = [];           
        newTrim.content = trimestral[prop][trim];              
        newYear.content.push(newTrim);
      }
      global.push(newYear);
    }         
  });
return deferred.promise;    
};

Although there may be room for improvement, the solution works smoothly and is simpler than expected.

Answer 4

After seeking help from a skilled web developer friend, I learned the process can be simplified into two steps: constructing the object and then formatting it as needed.

Here's what I ended up doing:

self.trimestral = function(){
  var deferred = $q.defer();
  var global = [];
  self.buildAndGetIncomes().then(function(result) {
    var trimestral = {};

    var incomes = result;

    // First loop, construct the object
    angular.forEach(incomes, function(income, i){
      var year = income.year,
          trim = income.trim,
          newTrim = {},
          newTrimContent = {};          
          if(trimestral[year] === undefined){
            trimestral['year' , year] = {};

          }
          if(trimestral[year][trim] === undefined) {
            trimestral[year][trim] = [];               
          }
           trimestral[year][trim].push(income);        

    });

   deferred.resolve(global);

   // Second loop, format the data
    for ( prop in trimestral ) {          
      newYear = {};
      newYear.name = prop;
      newYear.content = [];          
      for ( trim in trimestral[prop]){
        newTrim = {};
        newTrim.name = trim;
        newTrim.content = [];           
        newTrim.content = trimestral[prop][trim];              
        newYear.content.push(newTrim);
      }
      global.push(newYear);
    }         
  });
return deferred.promise;    
};

Although there may be room for improvement, the solution works smoothly and is simpler than expected.

Using AngularJS: Verify the presence of a key/value pair in an object and create an array of objects

Answer №1

Answer №2

Similar questions

Integrating individual front end JavaScript files into an Express.js application

Encountering a 400 error when utilizing the Google Translate free API with Curl

Attempting to create a fresh string by substituting certain characters with different ones

JkMegaMenu drop-down menus in Chrome are shifting to the left when the window is resized

Change the text of a button by using an input field

Modifying SVG gradients with JavaScript

All about the ins and outs of JavaScript and manipulating the

Avoid executing top-level path middleware with app.use('/') in Express routing when directly accessing child or nested paths

The Vuex commit has exceeded the maximum calstack size limit

When using sequential jQuery 'pages', an error referencing the third frame occurs

Utilizing ECMA 5 code within Internet Explorer 8

Angular ng-click function is not functioning properly within a DataTables table row

Analyzing: Sending the uploaded file or image to the backend server

What is preventing the Date Picker in Selenium from accepting attribute values when using JavaScript for the Spice Jet application?

What is the best way to verify the font-family using JavaScript?

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Leveraging the NextAuth hooks, employ the useSession() function within the getServerSideProps

Determine the size of the JSON string

Tracking progress with a dynamic bar from the beginning to the end

output the elements of a list of strings