Как запустить цикл и прочитать URL в Angular 8?

Question

Я пытался получить данные из URL-адреса в файл JSON и отобразить его с помощью HTML. URL-адрес JSON имеет только 1 изменение, т.е. изменяется только последняя цифра. Оно изменяется от 1 до 10: «https://jsonplaceholder.typicode.com/todos/1"

Я пытался запустить цикл для URL-адреса и прочитать данные, но мне не удалось это сделать.

Вот мойКод файла app.component.ts

import { Component } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { ApiService } from '../app/api.service';
import {User} from './user'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'JSON to Table Example';

  constructor(private apiService: ApiService) { }

  // let arrBirds: [number, number, string, boolean];
  arrBirds = [];

  ngOnInit() {
    var i;
    for (i=0;i<11;i++) {
      this.apiService.addUsers(i).subscribe(

        // data => {
        //  this.arrBirds = data.Object;     // FILL THE ARRAY WITH DATA.
        //  console.log(this.arrBirds[1]);

        data => {
          // this.arrBirds=Object.entries(data).map(([userID, ID]) => ({userID, ID, closed}));
          // this.arrBirds=Object.entries(data).map(([userID, ID]) => ({userID, ID, closed}));
          this.arrBirds.push(data);
          console.log(this.arrBirds);
        },(err: HttpErrorResponse) => {
          console.log(err.message);
        }
      );
    }
  }
} 

---

Вот мой код файла api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";
@Injectable()
export class ApiService {

    constructor(private http: HttpClient) { }

    x ="https://jsonplaceholder.typicode.com/todos/";

    getUsers(): Observable<any> {
       return this.http.get<any>(this.x);
    }

    addUsers(y): Observable<any> {
      for(y=1;y<=10;y++){
        return this.http.get<any>("https://jsonplaceholder.typicode.com/todos/y");
      }
    } 
}

Когда я выполняю это, только первые данные в URLпечатается 10 раз. Пример JSON to Table!

userID  ID  Title               Completed
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false
1       1   delectus aut autem  false

1 1 delectus aut autem false 1 1 delectus aut autem false

Я хочу прочитать все 10 данных в URL, выполнивцикл для последней цифры. Любая помощь приветствуется. Спасибо. PS Я очень новичок в Angular, через 2 дня. Вот и все.

Answer 1

Я думаю, вы просто хотели отобразить 1-10 записей из вашего API. Поэтому измените ваш сервис, как показано ниже - api.service.ts

  addUsers(): Observable<any> {
    return this.http.get("https://jsonplaceholder.typicode.com/todos/");
  }

Теперь измените ваш app.component.ts , как показано ниже.

import { Component } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { ApiService } from '../app/api.service';
import {User} from './user'

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })

  export class AppComponent {
    title = 'JSON to Table Example';

    arrBirds: Array<any>;
    constructor(private apiService: ApiService) { }

      ngOnInit() {
       this.searchService.addUsers().subscribe(todo => this.arrBirds = todo);
     }
    }

Теперь вы можете отображать записи в вашем файле app.html. Я собираюсь напечатать только 10 полей заголовка записи. Таким образом, используя таблицу, вы можете отобразить все поля 10 записей.

app.component.html

<ul>
   <li *ngFor="let arrBird of arrBirds | slice:0:10">
     <h1> {{arrBird.title}}</h1>
   </li>
</ul>

Answer 2

Во-первых, вы передаете y как строку, а не ее значение, а

, во-вторых, вы выполняете цикл два раза (в компоненте и услуге) для одного и того же вызова API и в цикле обслуживания каждый раз, когда он будетвернитесь к 1-й итерации (т. е. y=1, и вы получите тот же результат для id: 1, десять раз, поэтому удалите циклы из службы:

addUsers(y:number): Observable<any> {
    return this.http.get<any>("https://jsonplaceholder.typicode.com/todos/"+y);
} 

Рабочая демонстрационная ссылка

Выход:

Answer 3

Есть несколько проблем с вашим кодом.

1. Вы выполняете цикл от 0 до 10 как в вашем компоненте, так и в сервисе. Вам нужно только зациклить один раз. Удалить цикл из сервиса.

2. Текущий код выполняет сетевые вызовы один за другим из цикла for. Вы можете реализовать это лучше, запустив все сетевые вызовы параллельно, используя forkJoin.

     const networkCalls: Observable<any>[] = [];
     var i;
     for (i = 1; i < 11; i++) {
       networkCalls.push(this.apiService.addUsers(i));
     }
     forkJoin(networkCalls).subscribe(
       resultArray => {
         this.arrBirds = resultArray;
         console.log(this.arrBirds);
       },
       (err: HttpErrorResponse) => {
         console.log(err.message);
       }
     );
   

   Все сетевые запросы сохраняются как Observable в массиве networkCalls, а затем запускаются сразу, используя forkJoinна массиве. Это возвращает ответ на все вызовы в одном массиве, который может быть непосредственно назначен методу this.arrBirds.

3. addUsers, использующему y непосредственно в URL в виде строки. Вместо этого следует использовать значение y. У вас также есть baseUrl для API хранится. Таким образом, вы можете создать URL, используя литералы шаблона. Я переименовал x в baseUrl и y в userId для лучшего понимания.

   baseUrl ="https://jsonplaceholder.typicode.com/todos/";
   
   addUsers(userId): Observable<any> {      
       return this.http.get<any>(`${this.baseUrl}${userId}`);      
   } 
   

Работающий StackBlitz пример.

Answer 4

На самом деле вам не нужен еще один цикл внутри вашего сервиса. Просто измените вашу addUsers функцию следующим образом:

addUsers(y): Observable<any> {
  return this.http.get<any>("https://jsonplaceholder.typicode.com/todos/"+y);
}