In Angular, iterate through each country and assign a value of 0 to any blank fields

My challenge is to dynamically generate empty objects with a value of 0 for each country in relation to all months. Check out my plunker example: http://plnkr.co/edit/6ZsMpdFXMvGHZR5Qbs0m?p=preview

Currently, I only have data available for 2 months per country, but I want to display it for every month with empty data as blank (value 0). I have tried to achieve this but need to add a filter for each country.

for(var i = 1; i<=12; i++){
if(typeof checkArray[i] == 'undefined'){
  if(i<10) i='0'+i;
  $scope.year.push({
    'month':'2015-'+i,
    'val':'0'
  });
}

}

Answer №1

There might be a better way to accomplish this within Angular, but I am not aware of it. So, here is a JavaScript workaround:

<!-- in index.html -->
      <td ng-repeat="month in getMonths()">
        {{getCountryData(selectedCountry, month, 'val')}}
      </td>
      <td ng-repeat="month in getMonths()">
        {{getCountryData(selectedCountry, month, 'val2')}}
      </td>

and

// in script.js
  $scope.getMonths = function() {
    return ["2015-01", "2015-02", "2015-03", "2015-04",
            "2015-05", "2015-06", "2015-07", "2015-08",
            "2015-09", "2015-10", "2015-11", "2015-12"];
  };

  $scope.getCountryData = function(country, month, val) {
    var data = $scope.year.filter(function(el) {
      return el.country == country && el.month == month;
    })
    return data.length == 1 && data[0][val] || 0;
  };

This code will manually filter your data by month and country. It seems like this was the desired functionality, although I may have misunderstood the purpose of your custom filter. Updated Plunker example: http://plnkr.co/edit/7oRFHy5HFcXl4p1Uv1r9?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when running a minification build on Angular 5

After successfully updating my Single Page Application (SPA) from Angular 4 to Angular 5 along with all dependencies, everything seemed to be working well. Both the development and production builds were functioning without any errors or warnings. However ...

The web server is serving an HTML file instead of the expected JSON response

Is there a way to extract the JSON data from ? I have tried using AJAX but it only retrieves the entire HTML page instead. $.ajax({ url: 'http://www.bartdekimpe.be/anoire/index.php/admin/getGamesUserJson/34', success: function(data) { ...

"Utilize the parent component's functionality by extending/inheriting it

export default function PageTemplate() { return ( <div className="layout"> <LeftMenu /> <div className="content"> <TopMenu /> <div id="other-contents"> ...

AngularJs, Dynamically Adjusting URL Parameters Based on User Input

I am currently working on integrating my ASP.NET Web API with AngularJs. I am facing an issue where I need to pass optional parameters to the URL based on user input from 2 HTML text boxes, but I am unsure of how to accomplish this. Below is a snippet of ...

I'm sorry, but we were unable to locate the /bin/sh

After running a command using execSync that runs with sh, I observed the following: spawnSync /bin/sh ENOENT bin is now included in the PATH environment variable. Any ideas on this issue? ...

Ways to make a $resource in Angular return example data?

Let's imagine I have an angular service with the following resource: var res = $resource('/myurl/:index', {index: '@index'}) Is there a way for me to customize paths so that when I use: $res.query() I receive a predefined outpu ...

Leverage information extracted from the Node.js function

As I dive into the world of NodeJS, a particular issue arose while working with the getCurrentWeather() function. It's asynchronous nature means that it loads instantly upon app start and writes data to variables. However, when attempting to use these ...

Design of Redux middleware with focus on return values

I just finished learning about redux middleware, and it seems really useful. However, I have a question regarding the return values of middleware. I understand that some middleware return values (such as redux-promise), while others like logging do not - ...

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

Is there a way to refresh a specific element without having to reload the entire page when the button is clicked

While working on a rock, paper, scissors game in JavaScript, I found it tedious to have to constantly reload the page after each play. To solve this issue, I attempted to add a button that would reset the game for a new round. However, I encountered an err ...

Does running npm install automatically compile the library code as well?

I have a query regarding npm and its functionality. I also posted the same question on Reddit, but haven't received a satisfying answer yet. Let's use the jQuery npm package as a case study. Upon running the command npm install jquery, I notic ...

Utilize AngularJS to securely retrieve a zip file through a Spring-powered RESTful web service

AngularJs is still unfamiliar territory for me, and I'm looking to develop code that can download a zip file through a Spring-based RESTful web service upon clicking a 'download' button. The web service functionality is all set up, but I nee ...

Understanding how to retrieve a particular list item in JQuery without having the index in advance

I have a lengthy list that is broken down into various subheadings. How can I retrieve the second to last element of the list before a specific subheading, provided it is not the final element? Is it possible to do this if I know the ID of the subheading? ...

Retrieve a single value from a JavaScript array

There must be something simple I am missing here, as all the search results I found relate to looping over arrays, which is not what I want. My ajax call returns a response in the form of a straightforward array. When I use console.log(response); in the s ...

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

Leveraging ES6 Symbols in Typescript applications

Attempting to execute the following simple line of code: let INJECTION_KEY = Symbol.for('injection') However, I consistently encounter the error: Cannot find name 'Symbol'. Since I am new to TypeScript, I am unsure if there is somet ...

How to access v-model from a separate component in Vue.js

How can I access a v-model that is located in a different component? The search field is within the App.vue file and I am trying to activate the :search='search' property in the Datatable.vue component. Code in App.vue: <v-text-field ...

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

An error was encountered with Ajax and JSONP due to an unexpected token causing a SyntaxError

Currently attempting to retrieve information from the host at 000webhost The data is in JSONP format: { "categories": { "category": [ { "name": "Android", "parent": "Computer Science", "ID": "2323" }, { ...

Do overlay elements have to be positioned at the bottom of the HTML body every time?

As I delve into the world of JavaScript frameworks, one common trend I've noticed is that elements like dialogs, tooltips, and alerts usually appear at the end of the body tag. With my own implementation of these UI elements, I am determined to make ...