How to use JSON data obtained with interface-CodePudding

I am trying to create an accordion from the JSON data.

I am calling the GET request from json-server and successfully able to call the API.

I am not able to access the properties of the children in the variable tileData which shows the error:

Property 'children' does not exist on type 'Tile[]'.

Not sure where I am going wrong.

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

The function in service file is

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

I have created an interface to store the obtained JSON data which is shown below:

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

My JSON data received as follows:

{
  "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"
        }
      ]
    }
  ]
}

CodePudding user response：

Issue 1

Your JSON response was an object containing the data property with Tile[].

Use map from rxjs to return as Observable<Tile[]>.

import { map } from 'rxjs';

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

Issue 2

While the children property is an array but not an object.

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

Issue 3

To print out the name, you need to iterate titleData and iterate children array from each title object.

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

CodePudding user response：

You haven't mentioned the error but, the interface definition should use exact name as you have in data.

try

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