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
