What is the best way to populate an array with zeros when there is no data available?

Question

What is the best way to populate an array with zeros when there is no data available?

Currently, I am working on a project that involves using chart.js to display monthly profit data up to the current month. The data is retrieved from the server and there are two scenarios to consider:


        // First scenario
        data: [
            {month: 1, profit: 23},
            {month: 2, profit: 678},
            .
            .
            {month: 9, profit: 456}
        ]

In this first scenario, I need to complete the data set up to 12 months with zero profit for the missing months.

Second scenario


        // Second scenario
        data: [{0: {month: 9, profit: 23}}]

In this second scenario, I need to fill the array from month 1 to 12 with zero profit, excluding month 9 (September). How can I achieve this?

javascript angularjs chart.js

Answer 1

Answer №1

Feel free to experiment with this Plunker. It can serve as a starting point for you, allowing you to customize and adapt it according to your specific requirements.

 while (i < 12){
    if(data[prev] && i == data[prev][prev].month) {
      array.push(data[prev][prev]);
      prev++;
    } else {
      array.push({i:{month: i, profit: 0}});
  }
i++;

}

So this will essentially be the core of your function. All you need to do is adjust the final array to align with the chart.js format. Hopefully, this information proves valuable to you.

Answer 2

Feel free to experiment with this Plunker. It can serve as a starting point for you, allowing you to customize and adapt it according to your specific requirements.

 while (i < 12){
    if(data[prev] && i == data[prev][prev].month) {
      array.push(data[prev][prev]);
      prev++;
    } else {
      array.push({i:{month: i, profit: 0}});
  }
i++;

}

So this will essentially be the core of your function. All you need to do is adjust the final array to align with the chart.js format. Hopefully, this information proves valuable to you.

Answer 3

Answer №2

Take a look at this awesome fiddle

In essence, ensure your data is clean. Iterate through your data and store it in an array. Then iterate through a 12-month array and insert 0 where there are missing values.

data.forEach(function (item) {
  // -> loop through all keys in the item
  //    -> for each key, extract the month and profit and add to result
  //    -> result[month] = profit
});

Time to fill the gaps

// create a blank array with 12 slots
Array.apply(null, {length: 12 }).forEach(function (i, month) {
  // -> if result[month] == null
  //    -> this means there is no data for that month.
  //    -> add it to the result with profit 0
  //    -> result[month] == 0
});

Utilize the result array in your chart.

Answer 4

Take a look at this awesome fiddle

In essence, ensure your data is clean. Iterate through your data and store it in an array. Then iterate through a 12-month array and insert 0 where there are missing values.

data.forEach(function (item) {
  // -> loop through all keys in the item
  //    -> for each key, extract the month and profit and add to result
  //    -> result[month] = profit
});

Time to fill the gaps

// create a blank array with 12 slots
Array.apply(null, {length: 12 }).forEach(function (i, month) {
  // -> if result[month] == null
  //    -> this means there is no data for that month.
  //    -> add it to the result with profit 0
  //    -> result[month] == 0
});

Utilize the result array in your chart.

What is the best way to populate an array with zeros when there is no data available?

Answer №1

Answer №2

Similar questions

Inconsistent reliability of Loopback-context prompts the search for an alternative solution

Unresolved promise within a nested service in the then() method

Embed the Nest API into your HTML5 code

Issue with PLUploader in ASP.Net/JQuery: "Add Files" button not functioning post image upload操作

Meteor is failing to update the data in MongoDB

Get the desired text following the second <br> tag using jQuery

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

The Google Books API has reached its limit for requests

Importing dynamic NodeJS modules from one module

Issue with jqLite's .triggerHandler() functionality not behaving as anticipated

Smooth Div Scroll experiencing display issues

Leveraging Jest for mocking "import * as" operations

What is the process of saving a model with @tensorflow/tfjs-node version 2?

Make the minimum height of one div equal to the height of another div

Use AppScript to exclude the first row (which contains the column names) when filtering a table

A Step-by-Step Guide to Successfully Clicking on a Checkbox Using Selenium and Python

Enlarging the current division while reducing the size of the others when hovering

A lone function making two separate calls using AJAX

Tips on capturing JSON data for export and sending it to a specific URL

Discovering the source of a request payload