How to empty an array once all its elements have been displayed

Question

How to empty an array once all its elements have been displayed

My query pertains specifically to Angular/Typescript. I have an array containing elements that I am displaying on an HTML page, but the code is not finalized yet. Here is an excerpt:

Typescript

import { Component, Input, NgZone, OnInit } from '@angular/core';
...

@Component({
    selector: '...',
    templateUrl: '...'
})
export class MyComponent implements OnInit {
    ...
    staticKpi = [];
    
    constructor(...) {
        super();
    }

    ngOnInit(): void {
        this.initializeComponent();
    }

    private initializeComponent() {            
        let row = []; // For example, Apple, Banana, Mango, etc
        ...
        // GET CALL TO AN API TO POPULATE row[]
        ...
        this.staticKpi.push(row); // <--- THIS I WANT TO CLEAR AFTERWARDS
        row=[]; // CLEAR THE ARRAY
    }
}

HTML/Template

<div *ngFor="let element of staticKpi">
    <h2>element</h2>
</div>

Once staticKpi has been rendered, I aim to reset the array so it is primed for the next GET call, as opposed to accumulating additional elements on top of the existing ones. However, currently, nothing is being displayed. I suspect that the array may be getting cleared immediately after being populated. Can you identify where I might be going wrong?

javascript angular typescript

Answer 1

Answer №1

*ngFor="let item of dynamicKpi"

cycles through dynamicKpi and renders the content for each item contained within that array;

Only the items present in the array at the current moment will be displayed, so if you want to preserve them, it's necessary to save the data in a different array after each iteration and loop over that array in the template;

Answer 2

*ngFor="let item of dynamicKpi"

cycles through dynamicKpi and renders the content for each item contained within that array;

Only the items present in the array at the current moment will be displayed, so if you want to preserve them, it's necessary to save the data in a different array after each iteration and loop over that array in the template;

Answer 3

Answer №2

When working with JavaScript, it's important to remember that Arrays and Objects store references. This means that if you pass an array between functions and one function modifies the array, all other references to that array will be affected. To avoid this issue, you should create a new array instead.

Instead of:

this.staticKpi.push(row);

You should use:

this.staticKpi.push([...row]); // This creates a new array

Now, even if you do:

row = []

The copy of the array stored in staticKpi will remain unchanged.

Answer 4

When working with JavaScript, it's important to remember that Arrays and Objects store references. This means that if you pass an array between functions and one function modifies the array, all other references to that array will be affected. To avoid this issue, you should create a new array instead.

Instead of:

this.staticKpi.push(row);

You should use:

this.staticKpi.push([...row]); // This creates a new array

Now, even if you do:

row = []

The copy of the array stored in staticKpi will remain unchanged.

Answer 5

Answer №3

If my understanding is correct, you intend for the array named staticKpi to be empty every time the method initializeComponent is called.

import { Component, Input, NgZone, OnInit } from '@angular/core';
...

@Component({
    selector: '...',
    templateUrl: '...'
})
export class MyComponent implements OnInit {

    staticKpi = [];
    
    constructor() {
         //super(); // It's unnecessary to do this as this component doesn't extend another component. 
    }

    ngOnInit(): void {
        this.initializeComponent();
    }

    private initializeComponent() {  
        // Start by clearing the array
        this.staticKpi = [];  
         
        // Whenever the initializeComponent method is called, @var row will always be an empty array
        let row = []; // For example: Apple, Banana, Mango, etc
        // Merge the arrays together or simply assign row to staticKpi
        this.staticKpi = [...this.staticKpi,...row];

    }
}

Answer 6

If my understanding is correct, you intend for the array named staticKpi to be empty every time the method initializeComponent is called.

import { Component, Input, NgZone, OnInit } from '@angular/core';
...

@Component({
    selector: '...',
    templateUrl: '...'
})
export class MyComponent implements OnInit {

    staticKpi = [];
    
    constructor() {
         //super(); // It's unnecessary to do this as this component doesn't extend another component. 
    }

    ngOnInit(): void {
        this.initializeComponent();
    }

    private initializeComponent() {  
        // Start by clearing the array
        this.staticKpi = [];  
         
        // Whenever the initializeComponent method is called, @var row will always be an empty array
        let row = []; // For example: Apple, Banana, Mango, etc
        // Merge the arrays together or simply assign row to staticKpi
        this.staticKpi = [...this.staticKpi,...row];

    }
}

How to empty an array once all its elements have been displayed

Answer №1

Answer №2

Answer №3

Similar questions

What is the best method to incorporate filtering in a CRUD table?

How can I use Angular to dynamically open a video that corresponds to a clicked image?

Setting up Node on a Ubuntu system

Husky 5: The Ultimate Gitignore Manager

Guide on adjusting the scroll position in tinyscrollbar on page load

Shared Vue configuration settings carrying over to Jest spec files

How can I stop jQuery mobile from updating the document title?

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

Obtain a URL using JavaScript's regular expressions

Issue: [ng:areq] The parameter 'PieController' is not properly defined, it is currently undefined

strange issue encountered while utilizing JavaScript's async/await syntax

Displaying adornments in a vertical arrangement within a TextField using Material UI

What is the process of triggering an action from within getInitialProps?

Formik's setField function is not properly updating the value of an array when using Material UI's autocomplete

Typescript error TS2717: All following property declarations should share the same data type

Enhance user information by adding necessary fields

Storing checkbox status in Angular 7 with local storage

"The JQuery .validate method is not compatible with this property or method" - error message displayed

Ajax cannot seem to come to a resolution