How do you restore data to be identical to the data that was initialized at loading

Question

I am trying to reload only the data that is first loaded on a page when the user clicks a button. I know how to refresh the page but I can't find any good documentation to what I am trying to do. Can someone please redirect me to the right place? Here is the code I have that refreshes the page when the refresh icon is clicked.. Take a look at the glyphicon refresh, that is where I can refresh the page but I am supposed to load the data back after a user deletes rows, I can't explain it to well but I even tried to do window.location.reload() but that isn't the correct way to load data back to the page.

Thanks

component.html

<h1 class="padding-left">Bid Types</h1>
<hr />
<div>
    <ul class="flex-container-bid-header">
        <li><strong><span>ID</span></strong></li>
        <li><strong><span>BidTypes</span></strong></li>
        <li><strong><span>Status</span></strong></li>
        <li><strong><span>#Bid Periods</span></strong></li>
        <li><strong><span>Last Import</span></strong></li>
        <li><a href="/bidtypes" class="glyphicon glyphicon-refresh"></a></li>
    </ul>
</div>

component.ts

import {Component} from "@angular/core";
import {Bidtype, BidTypeStatus} from "../../models/bidtype";
import {bidPeriods} from "../../models/bidperiod";

@Component({
    selector: "bidtypes",
    templateUrl: "./bidtypes.component.html",
    styleUrls: ["./bidtypes.component.css"]
})

export class BidTypesComponent {
    bidtypes: Bidtype[] = [
        {
            id: 1,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 1,
                month: "May",
                year: "2018",
                importedOn: new Date(2018, 4, 1, 0, 0, 0, 0)
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "1/4/2018 5:45 PM"
        },
        {
            id: 2,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 2,
                month: "May",
                year: "2018",
                importedOn: new Date(2017, 4, 1, 0, 0, 0, 0)
            }, {
                id: 3,
                month: "June",
                year: "2018",
                importedOn: new Date(2017, 5, 1, 0, 0, 0, 0)
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "1/4/2018 5:48 PM"
        },
        {
            id: 3,
            fleet: "73G",
            seat: "CPT",
            domicile: "ANC",
            bidPeriods: [{
                id: 4,
                month: "May",
                year: "2018",
                importedOn: "5/1/2017"
            }],
            status: BidTypeStatus.Current,
            lastImportedOn: "3/4/2018 6:04 PM"
        },
    ];

    importbtnclicked(bidtype: Bidtype, newClass: string) {
        var currentDate = new Date();
        var dateString = currentDate.toLocaleDateString([], {hour: '2-digit', minute: '2-digit'});
        setTimeout(() => {
            newClass = "";
            bidtype.lastImportedOn = dateString;

            bidtype.status = BidTypeStatus.Current;
        }, 10000);
        bidtype.status = BidTypeStatus.Import;
        newClass = BidTypeStatus.Import;
    }

    deleteItem(bidtype: Bidtype) {
        this.bidtypes.splice(this.bidtypes.indexOf(bidtype), 1)
    }
}

Answer 1

As suggested by Nicholas Smith, you need to create a backup copy of the list. Inorder to do that you can make use of the cloneDeep() method of lodash. Following this SO post to learn about how to import lodash in your project. Importing lodash into angular2 + typescript application.

Once you have lodash included in your project and imported in your component as per the above SO post, then you can create a copy of your bidtypes list in the constructor or OnInit method.

bidTypesCopy: Bidtype[];

ngOnInit() {
  this.bidTypesCopy = _.cloneDeep(this.bidtypes);
 }

On click of refresh button you can restore this value to the original list.

this.bidtypes = _.cloneDeep(this.bidTypesCopy);

More about lodash cloneDeep here : https://lodash.com/docs/4.17.5#cloneDeep

Answer 2

One method would be to make a duplicate of bidtypes at the beginning, and restore the array from that duplicate when then refresh button is clicked.