typescript 如何使用接口获取的JSON数据

bvuwiixz 于 2022-12-19 发布在 TypeScript

关注(0)|答案(2)|浏览(335)

我正尝试从JSON数据创建一个 accordion 。
我正在从json-server调用GET请求，并且能够成功调用API。
我无法访问变量tileData中children的属性，显示错误：
类型“Tile[]”上不存在属性“children”。
不知道我哪里做错了。

tileData!: Tile[];
getTileData() {
  this.tileService.showTile().subscribe((data: any) => {
    this.tileData = data;
    console.log('this.tileData.children.name :>> ', this.tileData.children.name ); //Shows error
  });
}

服务文件中的函数为

showTile() {
  return this.http.get<Tile[]>('http://localhost:3000/data');
}

我已经创建了一个接口来存储获得的JSON数据，如下所示：

export interface Tile {
  name: string;
  image: string;
  children: { name: string; image: string; url: string };
}

我的JSON数据接收如下：

{
  "data": [
    {
      "name": "First",
      "image": "https://img.freepik.com/free-vector/football-2022-tournament-cup-background_206725-604.jpg?size=626&ext=jpg",
      "children": [
        {
          "name": "Firstone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firsttwo",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firstthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    },
    {
      "name": "Second",
      "image": "https://img.freepik.com/free-vector/football-2022-tournament-cup-background_206725-604.jpg?size=626&ext=jpg",
      "children": [
        {
          "name": "Secondone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondtwo",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    }
  ]
}

typescript

来源：https://stackoverflow.com/questions/74831394/how-to-use-json-data-obtained-with-interface

2条答案

按热度按时间

cpjpxq1n1#

第一期

您的JSON响应是一个包含data属性的对象，Tile[]。
使用rxjs中的map返回Observable<Tile[]>。

import { map } from 'rxjs';

showTile() : Observable<Tile[]> {
  return this.http.get<any>('http://localhost:3000/data')
    .pipe(map((response: any) => response.data));
}

第二期

而children属性是数组而不是对象。

export interface Tile {
  name: string;
  image: string;
  children: { name: string; image: string; url: string }[];
}

第3期

要打印出name，需要从每个title对象迭代titleData和children数组。

getTileData() {
  this.tileService.showTile().subscribe((data: any) => {
    this.tileData = data;

    for (let title of this.tileData) {
      for (let child of title.children) {
        console.log('title.children.name :>> ', child.name);
      }
    }
  });
}

Demo @ StackBlitz

赞(0）回复(0）举报 2022-12-19

3mpgtkmj2#

你没有提到这个错误，但是接口定义应该使用你在数据中使用的确切名称。
尝试

export interface Tile {
  name: string;
  image: string;
  children: { name: string; image: string; url: string };
}

赞(0）回复(0）举报 2022-12-19

我来回答

typescript 如何使用接口获取的JSON数据

2条答案

相关问题

热门标签

最新问答