JSON data and put in a array

Question

i have a file JSON (export from google sheet), here's my json:

{
    "Invités": {
        "Boizard ": {
        "Noms": "Boizard ",
        "Enfants": null,
        "FP": true,
        "Adresse": null,
        "Brunch": 7,
        "Nbr FP": 2,
        "OK": null,
        "OK enfant": null,
        "KO": null,
        "Attente": null,
        "mail cadeau": null,
        "Remerciements": null
        },
        "JLV et Sylviane Chartier": {
        "Noms": "JLV et Sylviane Chartier",
        "Enfants": null,
        "FP": true,
        "Adresse": "16 av du Général de Gaulle - 94300 Vincennes",
        "Brunch": 0,
        "Nbr FP": 1,
        "OK": null,
        "OK enfant": null,
        "KO": null,
        "Attente": null,
        "mail cadeau": null,
        "Remerciements": null
        },
        "J.........": {
        ..........
        ..........
        ..........
        }

    }   
}

i want to retrieve the data JSON from the file and the put in the array for display them with angular

thx

OK. So, what have you tried? What's the concrete problem you're facing? What's your question? — JB Nizet, Jul 24 '19 at 06:34
thx for ur answer. i placed the file JSON in folder asset. I tried to recup the data with: http://prntscr.com/oj91n0 here is the result: http://prntscr.com/oj91tr but i can not recup data with ngFor — Eolynas, Jul 24 '19 at 06:45

S.Voulgaris · Answer 1 · 2019-07-24T07:43:48.630

0

A very simple thing you can do is to include this file in your angular application as mock data so you can export it as a const (or create a class first) and then you can use it. Or if you have a get method for this file you can create a service and subscribe() to it in order to put it in an array.

UPDATE

export class MyData {
  title: string;
  details: Details;
}

export class Details{
  ...
  Noms: string;
  Brunch: number;
  Enfants:..... ;
  ...
}

export const MYDATA: MyData[] = [
 {
   title: ...
   details: { ....
   }
 },
 {
   title: ...
   details: { ....
  }
 }, 
......
];

And use the *ngFor within MYDATA constant

edited Jul 24 '19 at 07:43

answered Jul 24 '19 at 06:40

S.Voulgaris

184
1
4

i place the file JSON in the folde (asset), but i can not recup with ngFor – Eolynas Jul 24 '19 at 06:48
I updated my answer...take a look. I hope it will help you! – S.Voulgaris Jul 24 '19 at 07:39
Thank you for your answer, for cons I have a question, classes I create components for each? or I put in my TS file of my component that I use currently (sorry I start on Angular) – Eolynas Jul 24 '19 at 07:56
create a new .ts file and put it all together (the two classes and the constant)...then import them in the component you want in order to use it – S.Voulgaris Jul 24 '19 at 07:59
Sorry, but I can not understand what you want to tell me ... I have the impression that my problem comes from the fact that I can not exploit the data JSON in array – Eolynas Jul 25 '19 at 06:46

Udara · Answer 2 · 2019-07-24T07:33:00.173

0

Since you have got the data you can put them it to a *ngFor. Make sure you use invites.Invités since you have the array inside the Invités in json

edited Jul 24 '19 at 07:33

answered Jul 24 '19 at 07:13

Udara

176
10

it is precisely this part where I can not reach. I think the problem comes from the JSON file – Eolynas Jul 24 '19 at 07:29
you can put {{invites | json}} to show the json value in the view for testing purposes. Check where it is displaying properly. – Udara Jul 24 '19 at 07:32
After testing, I think the problem comes from the ngFor Here is what I have on my TS file: http://prntscr.com/oj9tga And my ngFor http://prntscr.com/oj9tke I try * ngFor = "let invite of invitees" – Eolynas Jul 24 '19 at 07:42
I guess the problem you have is in json response is coming with a tag "Invités". Try to use this.invites = data.Invités; in ts file – Udara Jul 24 '19 at 09:54

JSON data and put in a array

2 Answers2