I need to display a python array in angular

Question

This is the array

[
   {
      "TO":"test@gmail.com",
      "FROM":"nathanoluwaseyi@gmail.com",
      "SUBJECT":"subject 1",
      "NAME":"Oluwaseyi Oluwapelumi",
      "MESSAGE-DATE":[
         [
            "Hey eniayomi heeyyy",
            "2019-12-03 20:49:07"
         ]
      ]
   },
   {
      "TO":"test@gmail.com",
      "FROM":"pelz@gmail.com",
      "SUBJECT":"Thanks for contacting R",
      "NAME":"",
      "MESSAGE-DATE":[
         [
            "Thanks for contacting me! Once i check my email, i shall definitely get back.",
            "2019-08-18 19:48:10"
         ],
         [
            "will check it.",
            "2019-08-18 19:48:10"
         ]
      ]
   }
]

i need it to display on the angular frontend.

this is the mail.component.html file

<div class="card-body p-0">
                      <div class="float-left" style="width: 330px; height: 430px; border-right: 1px solid #dad9d9; overflow-x: hidden; overflow-y: auto;">
                          <div class="p-2 profile-card" style="width: 315px; height: 100px; border-bottom: 1px solid #dad9d9;" *ngFor="let mail of dataservice.data; let i = index;" (click)="viewMail(mail.MESSAGE_DATE,mail.FROM,mail.NAME,mail.DATE,i)" [ngClass]="{'highlight': selectedIndex === i}">
                              <div class="row">
                                  <div class="col-md-3 pt-2">
                                      <div class="rounded-circle shadow" style="background-image: url('images/avt.jpg'); background-repeat: round; height: 70px; width: 70px;">
                                          <div style="height: 20px; width: 20px; border: 3px solid white;" class="rounded-circle bg-success"></div>
                                      </div>
                                  </div>
                                  <div class="col-md-7 p-0 pl-3 pt-4" style="line-height: 12px;">
                                      <p style="font-size:18px;"><b>{{mail.FROM}}</b></p>
                                      <p style="font-size:13px;">{{mail.NAME }}.</p>
                                  </div>
                                  <div class="col-md-2 p-0 pt-3" style="line-height:11px;">
                                      <p class="text-secondary" style="font-size:12px;">20m <i class="fa fa-star fa-md" aria-hidden="true"></i></p>
                                  </div>
                              </div>
                          </div>

this is the data.service.ts file

  mail_det() {
    this.message = 'Welcome!';
    console.log(this.message);
    this.staff_email=sessionStorage.getItem('email');
    console.log(this.staff_email)

    this.http.get(this.domain_protocol + this.f_domain_name+'/api/v1.0/get_user_detail/?id='+this.staff_email)
      .subscribe((res) => {
      this.data = res
      console.log(this.data)
    })
  }

this is the mail.component.ts file

  viewMail(mail, mailer, mailee, user_date, _index: number) {
    this.router.navigate(['mail/'+ mailer])
    console.log(mail)
    console.log(mailer)
    console.log(user_date)
    this.message = ''
    sessionStorage.setItem('mailer', mailer)
    sessionStorage.setItem('mailee', mailee);
    sessionStorage.setItem('user_date', user_date)
    console.log(sessionStorage.getItem('mailer'))
    this.user_message = mail;
    this.mailee = mailee;
    this.user_date = user_date;
    this.selectedIndex = _index;
  }

i am doing something wrong. The only thing i get to show is the mail.FROM and mail.SUBJECT. I know this is because of the array in the mesage part. I dont know how to go about that.

Answer 1

In Data.service.ts

mail_det() {
    this.message = 'Welcome!';
    console.log(this.message);
    this.staff_email=sessionStorage.getItem('email');
    console.log(this.staff_email)

    this.http.get(this.domain_protocol + this.f_domain_name+'/api/v1.0/get_user_detail/?id='+this.staff_email);
  }

in mail.component.ts

public data: Array<any> = []; 
    constructor(public dataSrv: DataService <-- this is the class name of the data service you created; import it)




 ngOnInit(){
         this.dataSrv.mail_det().subscribe(result =>{
        console.log(result); <-- your api response; 
this.data = result;
}, error => {console.log(error);
});
            }

in mail.component.html

<div class="card-body p-0">
                      <div class="float-left" style="width: 330px; height: 430px; border-right: 1px solid #dad9d9; overflow-x: hidden; overflow-y: auto;">
                          <div class="p-2 profile-card" style="width: 315px; height: 100px; border-bottom: 1px solid #dad9d9;" *ngFor="let mail of data; let i = index;" (click)="viewMail(mail.MESSAGE_DATE,mail.FROM,mail.NAME,mail.DATE,i)" [ngClass]="{'highlight': selectedIndex === i}">
                              <div class="row">
                                  <div class="col-md-3 pt-2">
                                      <div class="rounded-circle shadow" style="background-image: url('images/avt.jpg'); background-repeat: round; height: 70px; width: 70px;">
                                          <div style="height: 20px; width: 20px; border: 3px solid white;" class="rounded-circle bg-success"></div>
                                      </div>
                                  </div>
                                  <div class="col-md-7 p-0 pl-3 pt-4" style="line-height: 12px;">
                                      <p style="font-size:18px;"><b>{{mail.FROM}}</b></p>
                                      <p style="font-size:13px;">{{mail.NAME }}.</p>
                                  </div>
                                  <div class="col-md-2 p-0 pt-3" style="line-height:11px;">
                                      <p class="text-secondary" style="font-size:12px;">20m <i class="fa fa-star fa-md" aria-hidden="true"></i></p>
                                  </div>
                              </div>
                          </div>