Filter angular json data

Question

I'm new to angular but I have been trying to filter some data in angular. I want it to //show data with language value as 'eng' but my solutions has been giving me an error as below

//ERROR in src/app/admin/kiosk/questions/questions.component.ts(88,24): error TS2339: Property 'language' //does not exist on type 'any[]'.

Below is my code

 private GetQuestions() {

       this.sub = this.kioskService.GetQuestions()
      .subscribe(res => {

        this.questions.language ==='eng';

        this.loading = false;

      });
  }

//this is the view

 <div  class="row" *ngFor="let question of questions  ;
                               let i = index
                               let even = even; 
                               let odd  = odd "
                              [ngClass]="{ odd: odd, even: even }"
                              >

        <p style="color: black; font-size: 15px;" class="id"><b>.</b></p>
        <p ng-hide="question.language === 'eng'" class="question">{{ question.question }}</p>
        <p class="disease">{{ question.disease }}</p>
        <p class="language" *ngIf="question.language === 'eng'">English</p>
        <p class="language" *ngIf="question.language === 'swa'">Kiswahili</p>
        <p class="position">{{ question.position }}</p>
        <p class="status">ACTIVE</p>
        <p class="date">{{ question.createdOn | date:'shortDate' }}</p>





   </div>

//please help.

Answer 1

I think here is the problem:

private GetQuestions() {

   this.sub = this.kioskService.GetQuestions()
  .subscribe(res => {

    this.questions.language ==='eng';

    this.loading = false;

  });
}

If questions is an array of objects, you may not asign directly to the array a property called language:

//ERROR
this.questions.language ==='eng';

So according the data you are getting in your GetQuestions method:

private GetQuestions() {

   this.sub = this.kioskService.GetQuestions()
  .subscribe(res => {

    this.questions.language ==='eng';

    this.loading = false;

  });
}

I think 'this.kioskService.GetQuestions()' is returning an observable, and you are subscribing to it, ok this is fine, but later, ¿What are you doing with the observable data?, you should get an array of objects by the 'this.kioskService.GetQuestions()' method and inside it instead of doing this:

this.questions.language ==='eng';

you should do this:

private GetQuestions() {

   this.kioskService.GetQuestions()
  .subscribe(res => {

       this.questions = res;
       this.loading = false;

   });

}

Remember that your response in the observable should contains an array of objects and each object inside this array may have a property 'language'.

Oh another strange thing that i realized is that you are not asigning anything to a variable, you are comparing strictly your array and a string:

//This is not an assignement, this returns an error because this property doesn't exists in an array
this.questions.language ==='eng';

Answer 2

Install below packages

npm install --save lodash
npm install --save-dev @types/lodash

Import lodash library in that component

import * as _ from 'lodash';

Declate veriable as

questions: any[] = [];


private GetQuestions() {

       this.sub = this.kioskService.GetQuestions()
      .subscribe(res => {

        this.questions = res;

        _.each(this.questions,q=>{
             q.language = "eng"
        }) 

        this.loading = false;

      });
  }