How to set json file to object's array in Angular

Question

how to set json file to my "Client" object's array? I have json, which looks like this:
Clients.json

{
   "clients": [
   {
      "firstName": "nameA",
      "lastName": "lastA",
      "doctorsName": "domm",
      "procedure": "consultation",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },
   {
      "firstName": "nameB",
      "lastName": "lastB",
      "doctorsName": "domm",
      "procedure": "procedureA",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },
   {
      "firstName": "nameC",
      "lastName": "lastC",
      "doctorsName": "doctorA",
      "procedure": "procedureC",
      "registrationDate": "new Date(2019, 10, 12)",
      "isAlreadyServed": "false"
   },

   ...
   ...
   ...

And how can I set it to object's array Client.service.ts

clients: Client[] = this.http.get('path.Clients.json') // ??

As explained in the documentation: angular.io/guide/http#requesting-a-typed-response — JB Nizet
– JB Nizet, Commented Sep 22, 2019 at 9:25

nash11 · Accepted Answer · 2019-09-22 10:27:05Z

4

Since your data is in the client-side as a JSON file. Though you can use HttpClient, here is another solution for the same.

You can directly import the JSON as a constant and assign it to clients as of TS 2.9 (docs).

import Clients from 'path/to/client/json';

clients: ClientsJson = Clients;

where the ClientsJson interface would look like this.

export interface ClientsJson {
    clients: Client[];
}

export interface Client {
    firstName: string;
    lastName: string;
    doctorsName: string;
    procedure: string;
    registrationDate: Date;
    isAlreadyServed: boolean;
}

Here is a working example on StackBlitz.

answered Sep 22, 2019 at 10:27

nash11

8,7503 gold badges23 silver badges58 bronze badges

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

Comments

user4717662 · Accepted Answer · 2019-09-22 09:39:28Z

You first need to define an interface that matches your object structure:

public interface ClientConfiguration {
    firstName: string;
    lastName: string;
    doctorsName: string;
    // And so on...
}

Then, just like the code you have shown, you need to type the http.get method in order to obtain the correct output.

public getConfiguration(): Observable<Array<ClientConfiguration>> {
    return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
}

Since my getConfiguration() method returns an observable, you will need to subscribe to it in your components or services:

@Component({ ... })
export class MyComponent implements OnInit {
    public ngOnInit(): void {
        this.getConfiguration().subscribe(result: Array<ClientConfiguration> => {
             this.clientConfiguration = result;
        });
    }

    public getConfiguration(): Observable<Array<ClientConfiguration>> {
        return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
    }
}

You can read more here about HttpClient at Angular's official documentation: https://angular.io/guide/http

Hope it helps.

Collectives™ on Stack Overflow

How to set json file to object's array in Angular

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