Cant access array element inside html table

Question

Hello i am doing database project on bar beer drinker. I am running a query on my database and using angular to display it on a local host website. I can see the query executes and gets the results. For a given drinker i run a query which gets all of the transactions they made at various bars, so all im trying to display is the transactions of a given person. I create everything properly as i can see it when i used postman and even see it in the request in the network tab under inspect element on local host. I can even print out an element on the page but once i try to print inside the table in my HTML it does not work and i can not figure out why, i have tried what feel like everything when i look things up but it does not seem to work i would greatly appericate any help thank you.

This is the code in my database.py under my server im running

def get_drinker_trans(name):
    with engine.connect() as con:
            query = sql.text(
                    "select b1.id, b1.bar, t1.item, b1.time, b1.date, t1.count, s1.price from Bills b1, Transactions t1, Sells s1 where b1.drinker = :name and t1.item in (select item from Beers) and b1.id = t1.bill and s1.bar = b1.bar and s1.item = t1.item order by b1.date"
            )
            rs = con.execute(query, name = name)
            results = [dict(row) for row in rs]
            for r in results:
                    r['price'] = float(r['price'])
            for r in results:
                    r['count'] = int(r['count'])
            return results

This is the app routing in my init.py in my server

@app.route("/api/drinkers/<name>", methods=["GET"]) def get_drinker_trans(name): try: if name is None: raise ValueError("Drinker not not found") return jsonify(database.get_drinker_trans(name)) except ValueError as e: return make_response(str(e), 400) except Exception as e: return make_response(str(e), 500)

My app routing module

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { WelcomeComponent } from './welcome/welcome.component';
  import { BarDetailsComponent } from './bar-details/bar-details.component';
  import { BeersComponent } from './beers/beers.component';
  import { DrinkersComponent } from './drinkers/drinkers.component';
  import { DrinkerDetailsComponent } from './drinker-details/drinker-details.component';

  const routes: Routes = [

{
  path: '',
  pathMatch: 'full',
  redirectTo: 'bars'
},
{
  path: 'bars',
  pathMatch: 'full',
  component: WelcomeComponent
},
{
  path: 'bars/:bar',
  pathMatch: 'full',
  component: BarDetailsComponent
},
{
  path: 'beers',
  pathMatch: 'full',
  component: BeersComponent
},
{
  path: 'drinkers',
  pathMatch: 'full',
  component: DrinkersComponent
},
{
  path: 'drinkers/:drinker',
  pathMatch: 'full',
  component: DrinkerDetailsComponent
}];

  @NgModule({
   imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] }) export class AppRoutingModule { }

My drinker service file where i say what a transaction is and consist of

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { LocationChangeListener } from '@angular/common';

  export interface Transaction{
bar: string;
count: number;
date: string;
id: string;
item: string;
price: number;
time: string; }

  @Injectable({
providedIn: 'root' })
export class DrinkersService {

constructor(private http: HttpClient) { }

getDrinkers(){
  return this.http.get<any[]>('/api/drinker')
}

//getDrinker(drinker:string){
//  return this.http.get<any[]>('/api/drinker/' + drinker)
//}

get_Trans(drinker:string){
  return this.http.get<Transaction[]>('/api/drinkers/' + drinker);
} }

My drinker details component

  import { Component, OnInit } from '@angular/core';
  import { DrinkersService, Transaction } from '../drinkers.service';
  import { ActivatedRoute } from '@angular/router';
  import { HttpResponse } from '@angular/common/http';

  @Component({
selector: 'app-drinker-details',
templateUrl: './drinker-details.component.html',
styleUrls: ['./drinker-details.component.css'] })
  export class DrinkerDetailsComponent implements OnInit {

drinkerName : string;
//drinkerDetails : any[];
trans: Transaction[];

constructor(
  public drinkerService: DrinkersService,
  public route: ActivatedRoute,
) {
  this.route.paramMap.subscribe((paramMap) => {
  this.drinkerName = paramMap.get('drinker');

  /*drinkerService.getDrinker(this.drinkerName).subscribe(
  data =>{
    //this.drinkerDetails = data;
  },
  (error: HttpResponse<any>) => {
    if (error.status === 404){
      alert('Dinker not found');
    }
    else{
      console.error(error.status + '-' + error.body);
      alert('error occurred on the server. please check the browser console');
    }
  }
  );*/


  this.drinkerService.get_Trans(this.drinkerName).subscribe(
    data => {
      this.trans = data;
    },
    (error: HttpResponse<any>) => {
      if (error.status === 404){
        alert('Drinker not found');
      }
      else{
        console.error(error.status + '-' + error.body);
        alert('error occurred on the server. please check the browser console');
      }
    }
  );



}); }

ngOnInit() {
}

}

My html code where i can access the array outside the table but not in, ive tried loops and other things but it does not work

<div class="jumbotron jumbotron-fluid">
<div class="container">
  <h1 class="display-4"></h1>
  <p class="drinker-details"></p>
</div>

<br>
{{trans[0].bar}}
<br>


<div class="container">
   <h2 class="text-center font-weight-light">Transactions</h2>
<br>
<p-table [value]="Transactions">
  <ng-template pTemplate="header">
    <tr>
      <th>Bar</th>
      <th>Count</th>
      <th>Date</th>
      <th>ID</th>
      <th>Item</th>
      <th>Price</th>
      <th>Time</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-trans>
    <tr>
      <td>{{trans.bar}}</td>
      <td>{{trans.count}}</td>
      <td>{{trans.date}}</td>
      <td>{{trans.id}}</td>
      <td>{{trans.item}}</td>
      <td>{{trans.price}}</td>
      <td>{{trans.time}}</td>
    </tr>
  </ng-template>
</p-table>

Pictures of what it looks like when i run it

Shows that that one element being displayed but can display in table

when i right click and do inspect element and go to network table and have the GET on the person Aaron Rodgers and the return results of the query

Answer 1

Try to replace line

<p-table [value]="Transactions">

with

<p-table [value]="trans">

Answer 2

In your component, your data is not properly assigned.

this.drinkerService.get_Trans(this.drinkerName).subscribe(
    data => {
      this.trans = JSON.parse(data);
    },
    (error: HttpResponse<any>) => {
      if (error.status === 404){
        alert('Drinker not found');
      }
      else{
        console.error(error.status + '-' + error.body);
        alert('error occurred on the server. please check the browser console');
      }
    }
  );