Encountering an Issue:
ERROR in src/app/fetch-trefle.service.ts:86:31 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.
86 mergeMap((item: any): Observable<any> => {
Here's the code snippet from my service:
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
import { pluck, concatMap, mergeMap, map, filter, first, elementAt } from 'rxjs/operators'
import { of } from 'rxjs'
interface GrowthData {
id: number
common_name: string
scientific_name: string
growth: {
minimum_precipitation: {
mm: number
}
maximum_precipitation: {
mm: number
}
}
}
@Injectable({
providedIn: 'root'
})
export class FetchTrefleService {
constructor(private http: HttpClient) { }
plantId = 273225
url = `https://trefle.io/api/v1/plants?token=${this.token}`
growthUrl = `https://trefle.io/api/v1/plants/${this.plantId}?token=GTF4gOKNDJTmYmR2ut6r6y1fyD3pN1GrGSEoST_s0mA`
proxyurl = 'https://cors-anywhere.herokuapp.com/'
page = '&page=1'
id
common_name
scientific_name
growth: {
minimum_precipitation: {
mm
}
maximum_precipitation: {
mm
}
}
fetchAllPlantData(): Observable<any> {
return this.getPlantGrowth()
return this.getPlantImageIdName()
}
getPlantImageIdName(): Observable<any> {
return this.http.get(this.proxyurl + this.url + this.page)
.pipe(
pluck("data"),
)
}
getPlantGrowth(): Observable<any> {
return this.http.get(this.proxyurl + this.growthUrl + this.page)
.pipe(
pluck("data"),
pluck("main_species"),
mergeMap((item: any): Observable<any> => {
this.id = of(item["id"]),
this.common_name = of(item["scientific_name"]),
this.scientific_name = of(item["scientific_name"]),
this.scientific_name = of(item["scientific_name"]),
this.growth.minimum_precipitation.mm = of(item["growth"]["minimum_precipitation"]["mm"]),
this.growth.maximum_precipitation.mm = of(item["growth"]["maximum_precipitation"]["mm"])
})
)
}
}
Snippet from the component:
import { Component } from '@angular/core'
import { FetchTrefleService } from './fetch-trefle.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
plants: any
constructor(private fetchTrefleService: FetchTrefleService) { }
getAllPlants() {
this.fetchTrefleService.fetchAllPlantData().subscribe(res => {
console.log(res)
this.plants = res
})
}
}
I am facing an issue with making multiple requests to the Trefle API and extracting various data points from each JSON response. The code was functioning correctly when making single requests but after refactoring for multiple requests, I encountered the TypeScript error mentioned above. It seems to be related to syntax or my understanding of Observables and RxJS behavior. Any insights would be greatly appreciated.
Thank you!