In JavaScript, there is a missing piece of logic when iterating through an array to find

Question

In JavaScript, there is a missing piece of logic when iterating through an array to find

I am working on a solution to populate empty values when data is not available for specific months. You can view my progress on Plunker here: http://plnkr.co/edit/f0IklkUfX8tkRZrn2enx?p=preview

$scope.year = [
{"month":"mar", "val":"23"},
{"month":"feb", "val":"45"},
{"month":"jan", "val":"56"}   
];

var total = ["jan", "feb", "mar", "apr", "may", "jun", "aug", "sep", "oct", "nov", "dec"];


for(var i=0; i<total.length; i++){

if($scope.year[i].month === undefined){ //Implement logic to identify missing month.

        $scope.year.push(
        {
            "month":total[i],
            "val":"0" 
        })
    }
}

I've created an array of default total months items to compare each month with the expected object. If a month is missing in the expected object, I need to add an empty item or set its value to "0" directly in the expected object.

javascript arrays angularjs

Answer 1

Answer №1

Here's a potential solution you could try

Update with JavaScript

var year = [
{"month":"mar", "val":"23"},
{"month":"feb", "val":"45"},
{"month":"jan", "val":"56"}   
];

var total = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];


// Array for current months
var currentMonth = [];
angular.forEach(year, function(item){
currentMonth.push(item.month); 
});

// Iterate through months
for(var i=0; i<total.length; i++){
  //$scope.year = [];

// Check if month is missing
if(currentMonth.indexOf(total[i]) === -1){ //logic here to see absent month.

        year.push(
        {
            "month":total[i],
            "val":"0",
            "order" : i
        })
    } else {
     year[currentMonth.indexOf(total[i])].order = i;    // add order
}
} 

$scope.year = year;

HTML Markup

 <!-- Order by new property order -->
 <td ng-repeat="item in year | orderBy: 'order'">
            {{item.val}}
          </td>

Here is the link for further reference

Answer 2

Here's a potential solution you could try

Update with JavaScript

var year = [
{"month":"mar", "val":"23"},
{"month":"feb", "val":"45"},
{"month":"jan", "val":"56"}   
];

var total = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];


// Array for current months
var currentMonth = [];
angular.forEach(year, function(item){
currentMonth.push(item.month); 
});

// Iterate through months
for(var i=0; i<total.length; i++){
  //$scope.year = [];

// Check if month is missing
if(currentMonth.indexOf(total[i]) === -1){ //logic here to see absent month.

        year.push(
        {
            "month":total[i],
            "val":"0",
            "order" : i
        })
    } else {
     year[currentMonth.indexOf(total[i])].order = i;    // add order
}
} 

$scope.year = year;

HTML Markup

 <!-- Order by new property order -->
 <td ng-repeat="item in year | orderBy: 'order'">
            {{item.val}}
          </td>

Here is the link for further reference

Answer 3

Answer №2

The value of year[i] is not defined, hence attempting to access a property of a non-existent object. You can rectify this by adding the condition "if($scope.year[i] === undefined)"

Answer 4

The value of year[i] is not defined, hence attempting to access a property of a non-existent object. You can rectify this by adding the condition "if($scope.year[i] === undefined)"

Answer 5

Answer №3

Your approach of utilizing the orderBy function may not be suitable for sorting by month since it is not an alphabetical sort.

The following code snippet generates an array containing all the months present in the data. It then iterates over each month in a year, adding any missing data and eventually sorts the information based on the indexing of the months.

 // create array of available months
  var availableMonths = $scope.year.map(function(item){
    return item.month;
  });

  // loop through each month and add if missing from data
  total.forEach(function(mo){        
    if(availableMonths.indexOf(mo) ===-1 ){
      $scope.year.push({"month":mo, "val":"0" })
    }
  });

  // sort data using index of months
  $scope.year.sort(function(a,b){
    return total.indexOf(a.month) > total.indexOf(b.month);
  });

It's advised to remove the orderBy filter from the HTML as the data has already been sorted.

In fact, steps 2 & 3 above could be combined into a single operation using splice() to ensure the final order is accurate. However, I kept them separate here for clarity purposes.

DEMO

Answer 6

Your approach of utilizing the orderBy function may not be suitable for sorting by month since it is not an alphabetical sort.

The following code snippet generates an array containing all the months present in the data. It then iterates over each month in a year, adding any missing data and eventually sorts the information based on the indexing of the months.

 // create array of available months
  var availableMonths = $scope.year.map(function(item){
    return item.month;
  });

  // loop through each month and add if missing from data
  total.forEach(function(mo){        
    if(availableMonths.indexOf(mo) ===-1 ){
      $scope.year.push({"month":mo, "val":"0" })
    }
  });

  // sort data using index of months
  $scope.year.sort(function(a,b){
    return total.indexOf(a.month) > total.indexOf(b.month);
  });

It's advised to remove the orderBy filter from the HTML as the data has already been sorted.

In fact, steps 2 & 3 above could be combined into a single operation using splice() to ensure the final order is accurate. However, I kept them separate here for clarity purposes.

DEMO

Answer 7

Answer №4

Give this a shot.

$scope.monthlyData = [

{"month":"jan", "value":"56"},
{"month":"feb", "value":"45"},
{"month":"mar", "value":"23"}

];

var allMonths = ["jan", "feb", "mar", "apr", "may", "jun", "aug", "sep", "oct", "nov", "dec"];


for(var x=0; x<allMonths.length; x++){

if(!$scope.monthlyData[x] || $scope.monthlyData[x].month === undefined){

        $scope.monthlyData.push(
        {
            "month":allMonths[x],
            "value":"0" 
        })
    }
}

Answer 8

Give this a shot.

$scope.monthlyData = [

{"month":"jan", "value":"56"},
{"month":"feb", "value":"45"},
{"month":"mar", "value":"23"}

];

var allMonths = ["jan", "feb", "mar", "apr", "may", "jun", "aug", "sep", "oct", "nov", "dec"];


for(var x=0; x<allMonths.length; x++){

if(!$scope.monthlyData[x] || $scope.monthlyData[x].month === undefined){

        $scope.monthlyData.push(
        {
            "month":allMonths[x],
            "value":"0" 
        })
    }
}

In JavaScript, there is a missing piece of logic when iterating through an array to find

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What could be causing the error message "Error: Cannot modify headers after they are sent" to appear?

Persistent hover state remains on buttons following a click event

Mongoose Does Not Allow for Duplicate Data Submissions

jQuery: Implementing a function for all elements, including those dynamically loaded through Ajax later on

What is the best way to access automatically generated JavaScript variables in TypeScript?

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

Can D3 transform regions into drinking establishments?

Change the color when hovering over the select box

Is coffeescript supported by Moovweb?

Parse the contents of an XML file in C and output the tags

Using JavaScript to interact with text elements in external SVG documents

Create a binding between a keyboard shortcut and a button's click event in Angular

How can you prevent warnings in Perl regarding uninitialized elements within an array?

Backbone and Laravel - Choose a squad and automatically create users for the selected team

Deciphering the hidden power of anonymous functions within Express.js

What is the process for transforming a method into a computed property?

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

Error 107 occurred while attempting to parse JSON data using the AJAX technique with the REST API

Swap out the hyperlink text for a dropdown menu when clicked and then revert back

Specialized selection option with disabled function