如何从 Json 占位符中获取记录，将其存储在数组中并在屏幕上打印

Question

我正在使用 Json 占位符。我想学习如何从远程服务器获取记录并使用它。这是我的代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-photographs',
  templateUrl: './photographs.component.html',
  styleUrls: ['./photographs.component.css']
})
export class PhotographsComponent implements OnInit {

  myStringifiedJson;

  constructor() {
    console.log(this.myStringifiedJson["title"]);
  }

  ngOnInit() {
    fetch('https://jsonplaceholder.typicode.com/photos')
    .then(response => response.json())
    .then(json => this.myStringifiedJson=JSON.parse(json));
  }
}

我收到这个错误：

ERROR TypeError: this.myStringifiedJson is undefined

这里是stackblitz。请纠正我。我必须在这里使用 stringify 吗？

Answer 1

我在这里看到多个问题

变量myStringifiedJson被异步赋值。因此，当您进行控制台日志记录时，它还没有分配任何值。因此控制台中出现 undefined 错误。您可以找到有关异步数据的更多信息 here.
从response.json()返回的值已经是一个有效的JS object。 JSON.parse() 不是必需的。
https://jsonplaceholder.typicode.com/photos返回的object其实是一个数组。所以你不能直接访问属性 title。但是，您可以使用 Array#map 方法将所有标题作为数组获取。

尝试以下方法

export class PhotographsComponent implements OnInit {
  myStringifiedJson: any;

  constructor() { }

  ngOnInit() {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(response => response.json())
      .then(json => {
        this.myStringifiedJson = json;
        console.log(this.myStringifiedJson.map(t => t['title']));    // <-- print here
      });
  }
}

我已经更新了你的Stackblitz

也就是说，我建议您使用 Angular 的 HttpClient 而不是 fetch 来发出 HTTP 请求。它与 RxJS 可观察对象协同工作，并提供许多优势，例如将响应与 RxJS 运算符和函数相结合。

app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  ...
})
export class AppModule { }

photographs.component.ts

export class PhotographsComponent implements OnInit {
  myStringifiedJson: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe(
      response => {
        this.myStringifiedJson = response;
        console.log(this.myStringifiedJson.map(t => t['title']));
      },
      error => { console.log(error); }
    );
  }
}

工作示例：Stackblitz

更新：使用`*ngFor`

您需要先绑定一个变量，然后才能使用 index 局部变量。此外，数组的每个元素都是一个 object，因此如果没有 json 管道，它只会呈现 [object Object].

<p *ngFor="let item of myStringifiedJson">
  {{ item | json }}
</p>

工作示例：Stackblitz

如何从 Json 占位符中获取记录，将其存储在数组中并在屏幕上打印

How to fetch records from Json Placeholder, store it in an array and print on screen

typescript

angular

jsonplaceholder

更新：使用`*ngFor`

如何从 Json 占位符中获取记录，将其存储在数组中并在屏幕上打印

How to fetch records from Json Placeholder, store it in an array and print on screen

typescript

angular

jsonplaceholder

更新：使用*ngFor

更新：使用`*ngFor`