Right, so I am iterating over an array of information and the information is showing the way that I want it to, however, I am getting some amaing looking errors in my console: ERROR TypeError: "_v.context.$implicit is undefined"

api service:

private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  getWeather(city: string, isoCode: string): Observable<any> {
    return this.http.get(`${this.endPoint}${city},${isoCode}${this.constants.apiKey}`)
    .pipe(map(this.extractData));
  }

ponent using api service:

  theWeather:any = [];
  countryList = COUNTRIES;
  isLoading: boolean = true;
  showWeather: boolean = false;

  constructor(private apiCall:ApiService) { }


  ngOnInit() {
    this.retrieveWeather()
  };

  retrieveWeather() {
    console.log('COUNTRY LIST', this.countryList);

    this.theWeather = [];
    this.countryList.map((element, i) => {
      this.apiCall.getWeather(element.city, element.countryIso)
        .subscribe((data: {}) => {
          element.weatherInfo = data;
        });
        this.isLoading = false;
      });
      this.showWeather = true;
  };

and the html file:

<div class="country-container">
  <div *ngIf="isLoading">
    <mat-card>
      <mat-progress-spinner class="spinner-style" color="primary" mode="indeterminate"></mat-progress-spinner>
    </mat-card>
  </div>
  <div *ngIf="showWeather" class="card-container">
    <mat-card *ngFor="let c of countryList" class="card">
      <mat-card-title>Weather for: {{c.city}}, {{c.countryName}}</mat-card-title>
      <mat-card-content>The current weather is: {{c.weatherInfo.weather[0].description}}</mat-card-content>
    </mat-card>

  </div>
</div>

finally an image of my console:

Thank you for the help!

edit: made the title more specific to the issue.

Right, so I am iterating over an array of information and the information is showing the way that I want it to, however, I am getting some amaing looking errors in my console: ERROR TypeError: "_v.context.$implicit is undefined"

api service:

private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  getWeather(city: string, isoCode: string): Observable<any> {
    return this.http.get(`${this.endPoint}${city},${isoCode}${this.constants.apiKey}`)
    .pipe(map(this.extractData));
  }

ponent using api service:

  theWeather:any = [];
  countryList = COUNTRIES;
  isLoading: boolean = true;
  showWeather: boolean = false;

  constructor(private apiCall:ApiService) { }


  ngOnInit() {
    this.retrieveWeather()
  };

  retrieveWeather() {
    console.log('COUNTRY LIST', this.countryList);

    this.theWeather = [];
    this.countryList.map((element, i) => {
      this.apiCall.getWeather(element.city, element.countryIso)
        .subscribe((data: {}) => {
          element.weatherInfo = data;
        });
        this.isLoading = false;
      });
      this.showWeather = true;
  };

and the html file:

<div class="country-container">
  <div *ngIf="isLoading">
    <mat-card>
      <mat-progress-spinner class="spinner-style" color="primary" mode="indeterminate"></mat-progress-spinner>
    </mat-card>
  </div>
  <div *ngIf="showWeather" class="card-container">
    <mat-card *ngFor="let c of countryList" class="card">
      <mat-card-title>Weather for: {{c.city}}, {{c.countryName}}</mat-card-title>
      <mat-card-content>The current weather is: {{c.weatherInfo.weather[0].description}}</mat-card-content>
    </mat-card>

  </div>
</div>

finally an image of my console:

Thank you for the help!

edit: made the title more specific to the issue.

• javascript
• angular
• angular-ponents

• Which line is line 9 in the Countries ponent? What does Countries look like? – DeborahK Commented Feb 20, 2019 at 18:48
• @DeborahK here is line nine in the html ponent: <mat-card-title>Weather for: {{c.city}}, {{c.countryName}}</mat-card-title> – Ctfrancia Commented Feb 20, 2019 at 18:51
• Sorry, the error is in the html, not the ponent. What's on line 9 of the html as per the error messages? – DeborahK Commented Feb 20, 2019 at 18:53
• @DeborahK sorry, I saw that after and updated the response. – Ctfrancia Commented Feb 20, 2019 at 18:55
• And here are a few suggestions that came up when I googled the error message: stackoverflow./questions/47008316/…, stackoverflow./questions/44944637/… – DeborahK Commented Feb 20, 2019 at 18:55

2 Answers 2

You get this error when the angular template is looping through an array of items, and one or more of the array elements is undefined.

This can happen if you create your array by placing a value in a position using the following notation:

myArray[1] = myObject;

If you do this, then myArray[0] will not have a value, and when angular loops through it, you'll get the error "_v.context.$implicit is undefined".

It's safer to use:

myArray.push(myObject);

You might also get this if you remove an element from an array leaving an undefined value at an index.

according to me on the 5th element (it says line 10 index 4 (which is element 5)) in the list it cannot fetch the weather conditions... check for bad request parameters and/or bad return data. remove temp the element or check it and see if the error "moves". maybe the best thing is to check for undefined even when there is no http error.