Как рассчитать среднее значение всех оценок из этого списка JSON?

Question

Мне дали JSON API, и я не могу рассчитать среднее значение для оценок.Я в настоящее время использую Angular7 (все еще новичок в этом).JSON выглядит следующим образом:

{
  "students": [
    {
      "city": "Fush\u00eb-Muhurr", 
      "company": "Yadel", 
      "email": "iorton0@imdb.com", 
      "firstName": "Ingaberg", 
      "grades": [
        "78", 
        "100", 
        "92", 
        "86", 
        "89", 
        "88", 
        "91", 
        "87"
      ], 
      "id": "1", 
      "lastName": "Orton", 
      "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg", 
      "skill": "Oracle"
    }
  ]
}

Мой служебный файл выглядит следующим образом:

export class StudentsService {
  baseURL:string =  'https://www.hatchways.io/api/assessment/students';
  constructor(private http: HttpClient) { }

  public getprofiles(): Observable<any> {
    return this.http.get<Profile[]>(this.baseURL);
  }
}

Определение TypeScript для JSON выглядит следующим образом:

export interface Profile {
  city: string;
  company: string;
  email: string;
  firstName: string;
  grades: [];
  id: string;
  lastName: string;
  pic: string;
  skill: string;
}

Mycomponent.ts файл, подобный следующему:

export class ProfilesComponent implements OnInit {
  studentList: Profile[] = [];

  constructor(private studentdata: StudentsService) {
    this.studentdata.getprofiles().subscribe((res: Profile[]) => {
      this.studentList = res;
      console.log(this.studentList);
    });
   }

  ngOnInit() {
    this.studentdata.getprofiles()
    .subscribe(
      data => {
        this.studentList = data.students;
      }
    );
  }
}

И я называю его в моем html-файле следующим образом:

<ul *ngFor="let list of studentList">
   <li>{{list.firstName}}</li>
   <li>{{list.lastName}}</li>
   <li>{{list.email}}</li>
   <li>{{list.company}}</li>
   <li>{{list.skill}}</li>
   <li>{{list.grades}}</li>
</ul> 

Answer 1

Если вам просто нужно отобразить среднюю оценку, вы можете создать трубу (не забудьте указать ее в module файле):

@Pipe({
    name: 'average'
})
export class AvgPipe implements PipeTransform {
    transform(items: any[]): any {
        return items.reduce((a, b) => a + +b, 0) / items.length;
    }
}

, а затем использовать ее в html следующим образом:

<ul *ngFor="let list of studentList">
   <li>{{list.firstName}}</li>
   <li>{{list.lastName}}</li>
   <li>{{list.email}}</li>
   <li>{{list.company}}</li>
   <li>{{list.skill}}</li>
   <li>{{list.grades}}</li>
   <li>{{list.grades | average}}</li>   // <-- This line
</ul> 

Если вам нужно сохранить фактическое значение, вы можете установить avg для каждого элемента и использовать его в html файле:

this.studentdata.getprofiles().subscribe(res => {
    this.studentList = res.students;
    console.log(this.studentList);
    this.studentList.forEach(x => x['avg'] = x.grades.reduce((prev, next) => prev + +next, 0) / x.grades.length);
});

и в html:

<ul *ngFor="let list of studentList">
   <li>{{list.firstName}}</li>
   <li>{{list.lastName}}</li>
   <li>{{list.email}}</li>
   <li>{{list.company}}</li>
   <li>{{list.skill}}</li>
   <li>{{list.grades}}</li>
   <li>{{list['avg']}}</li>
</ul> 

Вот пример stackblitz , демонстрирующий это с предоставленными вами фактическими данными.

Надеюсь, это поможет ...

Answer 2

Прежде всего, установите тип для вашей оценки в вашей модели:

измените grades:[] на grades: string [] ( Я задаю строку в соответствии с вашим json )

как показано ниже:

export interface Profile {
 city: string;
 company: string;
 email: string;
 firstName: string;
 grades: string[];
 id: string;
 lastName: string;
 pic: string;
 skill: string;
}

Затем создайте трубу для вычисления среднего значения:

@Pipe({
  name: 'average'
})
export class AveragePipe implements PipeTransform {      

  transform(items: string[], ...args: any[]): any {
    // first we convert each item to number
    const sum = items.map(item => {
      return parseInt(item);
    }).reduce((acc, val) => { return acc + val; }, 0);

    return sum > 0 ? sum / items.length : 0;      
  }      

}

и в своем html:

<table class="table table-hover">
    <thead>
        <tr>
            <th>City</th>
            <th>Company</th>
            <th>Email</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Average</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of this.studentList">
            <td>{{ this.item.city}}</td>
            <td>{{ this.item.company}}</td>
            <td>{{ this.item.email}}</td>
            <td>{{ this.item.firstName}}</td>
            <td>{{ this.item.lastName}}</td>
            <td>{{ this.item.grades | average}}</td>
        </tr>
    </tbody>
</table>

DEMO