How to replace static array data with from api request in Angular?

How do I replace the static array data to the response data from API request?

I have a sample array of data below I want to replace that data with the data I get from an API response, How do I do that?

Currently using a template on this project, not sure what I'm doing.

import { Mailbox } from './email';

export const mailboxList: Mailbox[] = [
  {
    MailId: 'bb428c03-1bc6-4f3d-9d5e-268ec44eebc3',
    fromId: '899d0e31-b71e-4d95-a8a0-6a8bceb314bd',
    Subject: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
    date: new Date('1-15-2020'),
    Message:
      '1.The phrase Lorem ipsum dolor sit amet consectetuer appears in Microsoft Word online Help. This phrase has the appearance of an intelligent Latin idiom. Actually, it is nonsense.',
    readStatus: false,
    seen: false,
    mailbox: 'Inbox',
    filter: ['Star'],
    label: ['Personal'],
  },
  {
    MailId: 'a19bf9fc-e877-49e7-a75a-b089a2c35f18',
    fromId: '3782c174-1f2c-4dc4-b75d-0bedf400e023',
    Subject: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
    date: new Date('1-10-2020'),
    Message:
      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
    readStatus: false,
    seen: false,
    mailbox: 'Inbox',
    filter: ['Important'],
    label: ['Work'],
  },
];

I've used the code below get request graph API to get the mailbox data.

getMessages(url: string) {
  const newurl = url + '/mailFolders/inbox/messages';
  this.http.get<any>(newurl)
  .subscribe(response => {
      this.messages = response.value.map((message: any) => ({ 
          MailId: '',
          fromId: '',
          Subject: '',
          date: '',
          Message: '',
          readStatus: false,
          seen: false,
          mailbox: '',
          filter: '',
          label: '',
      }));
      console.log(this.messages);
  });
}

Email Service code below

import { Injectable } from '@angular/core';
import { Mailbox } from './email';
import { mailboxList } from './email-data';
import { User } from './user-data';

@Injectable({
  providedIn: 'root'
})

export class mailGlobalVariable {
  public page = 1;
  public pageSize = 5;
  public collectionSize = 0;

  public topLable = '';
  public mailList: Mailbox[] = [];
  public selectedMail: Mailbox | null = null;
  public selectedUser: User | any = null;

  public users: User[] = [];
  public inboxList: Mailbox[] = [];
  public sentList: Mailbox[] = [];
  public draftList: Mailbox[] = [];
  public spamList: Mailbox[] = [];
  public trashList: Mailbox[] = [];

  public isShow = false;
  addClass = true;
  inboxCount = 0;
  spamCount = 0;
  draftCount = 0;
  replyShow = false;

  type = '';

  global(): void {
    this.inboxCount = this.inboxList.filter(
      (inbox) => inbox.mailbox === 'Inbox' && inbox.seen === false,
    ).length;
    this.spamCount = this.spamList.length;
    this.draftCount = this.draftList.length;
  }
}

@Injectable({
  providedIn: 'root'
})

export class mailService {
  public getInbox(): Mailbox[] {
    return mailboxList.filter((mail) => mail.mailbox === 'Inbox');
  }
  public getSent(): Mailbox[] {
    return mailboxList.filter((mail) => mail.mailbox === 'Sent');
  }
  public getDraft(): Mailbox[] {
    return mailboxList.filter((mail) => mail.mailbox === 'Draft');
  }
  public getSpam(): Mailbox[] {
    return mailboxList.filter((mail) => mail.mailbox === 'Spam');
  }
  public getTrash(): Mailbox[] {
    return mailboxList.filter((mail) => mail.mailbox === 'Trash');
  }
}

You should review the way you work and store with your data at all.

Angular way would be to create a service with data stored in a property and then fetch from api and change value in this property.

@Injectable({providedIn: 'root'})
class MessagesService {
  ...
  list: Message[] = [...];

  loadFromApi(): void {
    this.http.get(...).subscribe(response => {
      this.list = response.value.map(...);
    });
  }
}

And then use this service in components, retrieve data and fetch when you want/need it.

if you need just a quick workaround just for your case to make it work it will be a horrible code - need to mutate your array for example using splice:

getMessages(url: string) {
  const newurl = url + '/mailFolders/inbox/messages';
  this.http.get<any>(newurl)
  .subscribe(response => {
    mailboxList.splice(0, mailboxList.length, ...response.value.map(...));
  });

Don't do this in real app, just for 1 sec test or something.