How to use JSON data obtained with interface

Question

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

Yong Shun · Accepted Answer · 2022-12-17 03:15:49Z

5

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

edited Dec 17, 2022 at 3:15

answered Dec 17, 2022 at 2:45

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dev · Accepted Answer · 2022-12-17 06:06:52Z

0

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 };
}

answered Dec 17, 2022 at 6:06

Dev

11 bronze badge

Collectives™ on Stack Overflow

How to use JSON data obtained with interface

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related