Struggling with a weather app using the OpenWeatherMap API, I've encountered service blocking issues twice already due to excessive requests. Despite thoroughly checking my code multiple times, I can't pinpoint any specific loop causing server overload. The console error message that follows is: ERROR TypeError: ctx.amindiDGES is undefined.
The error surfaces on several lines in my main.component.html:
MainComponent_Template main.component.html:8
getLocation main.component.ts:39
ngOnInit main.component.ts:27
Here's an excerpt from my today.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class TodayService {
url = 'http://api.openweathermap.org/data/2.5/weather';
apiKey = '***********************';
constructor(private http: HttpClient) { }
daitriecoordinatebi(lat, lon) {
let params = new HttpParams()
.set('lat', lat)
.set('lon', lon)
.set('units', 'metric')
.set('appid', this.apiKey)
return this.http.get(this.url, { params });
As for my main.component.ts:
import { Component, OnInit } from '@angular/core';
import { TodayService } from './today.service';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
lat;
lon;
amindiDGES;
kvirisdgeToday;
ikonkaToday;
title = 'Day1';
today = new Date();
constructor(private todayService: TodayService) { }
ngOnInit(): void {
// Obtain location
this.getLocation();
this.today = new Date();
}
getLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.watchPosition((success) => {
this.lat = success.coords.latitude;
this.lon = success.coords.longitude;
this.todayService.daitriecoordinatebi(this.lat, this.lon).subscribe(data => {
this.amindiDGES = data;
})
})
}
}
}
Portion of my main.component.html:
<table>
<tbody>
<tr>
<td><i class="fas fa-wind"></i></td>
<td> Wind - {{amindiDGES.wind.speed}}</td>
</tr>
<tr>
<td><i class="far fa-eye"></i></td>
<td> Visibility - {{amindiDGES.visibility}}</td>
</tr>
<tr>
<td><i class="fas fa-tachometer-alt"></i></td>
<td> Preassure - {{amindiDGES.main.pressure}}</td>
</tr>
<tr>
<td><i class="fas fa-tint"></i></td>
<td> Humidity - {{amindiDGES.main.humidity}}</td>
</tr>
</tbody>
</table>
Despite successfully receiving data from the server and displaying results, the app remains blocked after some usage due to exceeding the allowable request limit of 60 per minute by making over 800 requests. In addition, a consistent console error persists: ERROR TypeError: ctx.amindiDGES is undefined.
One speculation is that the app might attempt to show data prior to complete retrieval from the server, triggering errors in the console and leading to continuous repeated requests until API access is restricted.
Have you encountered similar challenges with data fetching before?