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

Unable to modify the bar's color using the .css document

Can [] be considered a valid type in Typescript language?

NodeJS API Language Configuration

Utilizing NodeJS to Refine JSON Data

accessing the angular fullstack default application by authenticating via google oauth2

Tips for assisting flow with managing the initialization of react component state

Tips for declaring the project npm registry within the package.json configuration file

Encountered a timeout error of 2000ms while running tests on an asynchronous function within a service

Steps for sending a form with jQuery's submit method1. Start

Fill the rows of the <Table> using HTML code

Is there a way to fill select boxes with multiple values?

Is there a method to consistently implement a controller function across all routes within a router file in Express?

Function that contains a JavaScript reference and observation

How come the data I send gets converted to Undefined when working with Tabulator?

jquery's each method is not functioning as intended and causing unexpected issues

Utilize Javascript to generate intricate table headers based on JSON data

"When I use breakpoints and run my application in debugging mode, it performs flawlessly. However, without these tools, it

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

I am utilizing client-side JS to send a large number of requests. What methods can I implement to enable my server to cache this content

Creating a radio button along with a submit button that redirects to a different local HTML file