When attempting to contact the service, this.food is recognized as a string
import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Route } from '@angular/compiler/src/core';
import { Foods } from '../../models/Foods';
@Component({
selector: 'app-client-info',
templateUrl: './client-info.component.html',
styleUrls: ['./client-info.component.css'],
})
export class ClientInfoComponent implements OnInit {
id: string;
client: Client;
food: string;
foods: Foods;
constructor(
private clientservice: ClientService,
private router: Router,
private route: ActivatedRoute,
private flashmessage: FlashMessagesService
) {}
ngOnInit(): void {
this.id = this.route.snapshot.params['id'];
this.food = this.route.snapshot.params['food'];
this.clientservice.getClient(this.id).subscribe((client) => {
this.client = client;
});
this.clientservice
.getNutrition(this.food)
.subscribe((foods) => (this.foods = foods.foods));
}
}
Having trouble extracting "foods" from the JSON in the getNutrition function and unsure if it's being done correctly. At the same time, encountering HTTP request errors. Postman testing went smoothly, but the body sent on Postman was in JSON format, could that be causing the issue?
Here is the related service:
import { Injectable } from '@angular/core';
import {
AngularFirestore,
AngularFirestoreCollection,
AngularFirestoreDocument,
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { Client } from '../models/Client';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ThrowStmt } from '@angular/compiler';
@Injectable({
providedIn: 'root',
})
export class ClientService {
clientCollections: AngularFirestoreCollection<Client>;
clientDoc: AngularFirestoreDocument<Client>;
clients: Observable<Client[]>;
client: Observable<Client>;
foods: Observable<any>;
constructor(private firestore: AngularFirestore, private http: HttpClient) {
this.clientCollections = firestore.collection('clients');
}
getNutrition(query: string): Observable<any> {
let url: string = 'https://trackapi.nutritionix.com/v2/natural/nutrients';
let headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-app-id': 'xxx',
'x-app-key': 'xxx',
});
let options = { headers: headers };
this.foods = this.http.post(url, query, options).pipe(
map((req) => {
console.log(req);
})
);
return this.foods;
}
}
This is the JSON data received from Postman:
{
"foods": [
{
"food_name": "apple",
"brand_name": null,
"serving_qty": 1,
"serving_unit": "medium (3\" dia)",
"serving_weight_grams": 182,
"nf_calories": 94.64,
"nf_total_fat": 0.31,
"nf_saturated_fat": 0.05,
"nf_cholesterol": 0,
"nf_sodium": 1.82,
"nf_total_carbohydrate": 25.13,
"nf_dietary_fiber": 4.37,
"nf_sugars": 18.91,
"nf_protein": 0.47,
"nf_potassium": 194.74,
"nf_p": 20.02,
"full_nutrients": [
...
]
...
]
}
Edit: Here is my Food.ts file in the models directory:
export interface Foods {
nf_total_fat?: number;
nf_saturated_fat?: number;
nf_cholesterol?: number;
nf_sodium?: number;
nf_total_carbohydrate?: number;
nf_dietary_fiber?: number;
}