Question 110442 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Can't read object of object Json file | angular | typescript | ngfor

Helloo !

i would use a json files in my angular-app.

I have a local json file ‘client.json’

{
  "T001": {
    "name": "admin",
    "type": "adm",
    "id": "1",
    "class": "viewer",
  },
  "T002": {
    "name": "Customer",
    "type": "usr",
    "id": "2",
    "class": "viewer",
  },
  "T003": {
    "name": "DB450",
    "type": "air",
    "id": "3",
    "class": "gateway",
  },
  "T004": {
    "name": "DB620",
    "type": "air",
    "id": "4",
    "class": "gateway",
  }
}

Actually, i could read this file and i got access to the name of object (object of object) — T003.name for example and using console.log to display the result but this is not what i’m looking for because i can’t use this variable into html template.

import { Component, OnInit } from '@angular/core';
import * as tunnelsData from '../data/client.json'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
 objects: any;
ngOnInit(): void {
    this.objects = (tunnelsData as any).default;
    console.log(this.object);

  }
}

I’m looking for loads this file into a variable, then using this variable on a html template with ngfor like this :

<my-app *ngFor="let T of objects"
               [tunnel]="T"
               [name]="T.name"><my-app>

tunnel and name are two variables of my second component
To display at the end an example like this :

Tunnel : T001 (which the first object of my file)

Name : admin (which an object of the first object)
.
.
.

I hope it’s clear for you.

any idea please ?

Thank you.

Tags:

2

Answers


  1. 0

    Generaly, angular does not support iterating over objects in ngFor.
    Check your browser’s dev tools console. There should be an error.
    You can use pipe in ngFor to make it work KeyValuePipe.
    For more details check this thread.
    And to display the key (eg."T001"), you would need to pass it too.

        *ngFor="let item of objects | keyvalue"
               [tunnel]="item.value"
               [name]="item.value.name"
               [key]="item.key"
    Login or Signup to reply.
  2. 0

    The only problem is that you don’t have an array in your json data. you have this data as an object

    {
 "T001": {
  "name": "admin",
  "type": "adm",
  "id": "1",
  "class": "viewer",
},
 "T002": {
 "name": "Customer",
 "type": "usr",
 "id": "2",
 "class": "viewer",
},
 "T003": {
 "name": "DB450",
 "type": "air",
 "id": "3",
 "class": "gateway",
},
 "T004": {
 "name": "DB620",
 "type": "air",
 "id": "4",
 "class": "gateway",
 }
}

    And in your html you are trying to loop through your elements with ngFor. So ngFor directive always expects an array to loop in html.

    So the simple solution you can have is that in your component you can do like this

    app.component.ts

    this.objects = (tunnelsData as any).default;
this.objectKeys = Object.keys(his.objects); // ['T001', 'T002', 'T003', 'T004']

    And inside of your html you can do like this

    <my-app *ngFor="let keyName of objectKeys" [tunnel]="objects[keyName]" [name]="objects[keyName]?.name"><my-app>

    What i am doing here is that first i am getting all of the keys of your object as an array and then i am iterating over the array of keys. And in html i am accessing the individual object by it’s key name which is coming from ngFor loop.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search