0

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.

corol
  • 71
  • 5
  • 1
    What is your error? I see, that this.objects = (tunnelsData as any).default is using .default but what is .default? I cant find it in your json file. – Schrader Jan 04 '23 at 09:34
  • 1
    Your JSON file contains an object and not an array. So you need to create an array from it. – riorudo Jan 04 '23 at 09:37
  • @Schrader, thanks for your response, i use the .default to display the json file by default, error message : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? – corol Jan 04 '23 at 09:47
  • @corol in your `json` you don't have an `array`. You have an `object` having different keys. So first you have to create an object if you want to loop in your html – Fahad Subzwari Jan 04 '23 at 09:48
  • @riorudo thank you, can you explain more ? i'm learning this langage – corol Jan 04 '23 at 09:48
  • 1
    Have a look at the answer of @Fahad Subzwari. He creates a list with all object keys "T001", "T002"... and in the html file he loops over the key list with `*ngFor` and accesses the individual object data by key. That's a nice way to solve your problem. – riorudo Jan 04 '23 at 10:12

2 Answers2

2

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.

Fahad Subzwari
  • 2,109
  • 3
  • 24
  • 52
1

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"
Robert
  • 11
  • 3