implicit context is undefined, angular 7

Question

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));
  }

component 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.

Which line is line 9 in the Countries component? What does Countries look like? — DeborahK, Feb 20 '19 at 18:48
@DeborahK here is line nine in the html component: Weather for: {{c.city}}, {{c.countryName}} — Ctfrancia, Feb 20 '19 at 18:51
Sorry, the error is in the html, not the component. What's on line 9 of the html as per the error messages? — DeborahK, Feb 20 '19 at 18:53
And here are a few suggestions that came up when I googled the error message: https://stackoverflow.com/questions/47008316/ionic-error-v-context-implicit-is-undefined, https://stackoverflow.com/questions/44944637/v-context-implicit-categories0-is-undefined-error-in-ionic-3 — DeborahK, Feb 20 '19 at 18:55
They suggest that there may be a null or invalid entry in the array. — DeborahK, Feb 20 '19 at 18:56
@DeborahK I was looking at those earlier and was unable to resolve it, because in my instance it will not let me push into the array I have to over write it. — Ctfrancia, Feb 20 '19 at 18:57
Did you try their suggestions, such as using the save navigation operator? — DeborahK, Feb 20 '19 at 19:01
Possible duplicate of [Ionic Error v.context.$implicit is undefined](https://stackoverflow.com/questions/47008316/ionic-error-v-context-implicit-is-undefined) — Félix Brunet, May 22 '19 at 15:07

score 5 · Accepted Answer · answered Jul 02 '21 at 12:09

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.

Perfect explanation, in my situation I was using `array.push()` but the pushed item was `undefined` — Scuzzy, Jan 12 '22 at 01:39

score 0 · Answer 2 · answered Feb 20 '19 at 19:39

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.

implicit context is undefined, angular 7

2 Answers2

Linked