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

How to effectively trigger a function to load images in React

What could be causing the video not to display in landscape mode on the iPad Pro?

jquery plugin causing issues with bootstrap button functionality

Using getElementsByTagName in E4X code involves querying for specific

The (window).keyup() function fails to trigger after launching a video within an iframe

Encountered an issue with reading the property 'drop' from an undefined source during a straightforward migration

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Create queries for relays in a dynamic manner

Problem with sidebar animation: Functioning properly when open, but closes abruptly without animation in React using Tailwind CSS

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

Sliding carousel from right to left

Invoke a directive's function on a page by utilizing ng-click in AngularJS

Refresh the PartialView only after clicking submit

Utilize the useState hook to update state when changes occur in the

What is the best way to display two tables side by side in a Vue component?

Retrieving information from the backend with AngularJS

Executing NPM commands in a sequential manner

Guide on accessing js file in an Angular application

The UnCSS exclusion feature seems to be malfunctioning

The MDL layout spacer is pushing the content to the following line