JSON object interfaced return undefined

Question

i want to create a pipe in Angular 9 that translate my table words in various language. I have created a JSON file that contains a key and the value for a translation service. I have also created some interfaces for this json file.

translate.json

{
"lang":[
    {
      "IT": [
        { "name": "Nome" },
        { "surname": "Cognome" },
        { "email": "E-mail" },
        { "cf": "Codice fiscale" },
        { "phone": "Cellulare" },
        { "age": "Età" },
        { "city": "Città" },
        { "job": "Lavoro" }
      ]
    },
    {
      "EN": [
        { "name": "first name" },
        { "surname": "last name" },
        { "email": "E-mail" },
        { "cf": "Fiscal code" },
        { "phone": "Phone" },
        { "age": "Age" },
        { "city": "City" },
        { "job": "Job" }
      ]
    }
  ]

}

translateInterface.ts

export interface Lang {
  lang: (Langs)[];
}
export interface Langs {
  IT: (ITEntityOrENEntity)[];
  EN: (ITEntityOrENEntity)[];
}
export interface ITEntityOrENEntity {
  name: string;
  surname: string;
  email: string;
  cf: string;
  phone: string;
  age: string;
  city: string;
  job: string;
}

translate.service.ts

translate(key: string, lang:string) {
    return this.http.get<Langs>('assets/json/translate.json').subscribe((res: Lang) => console.log(res))

    }

I have updated the json and the interface, now how i can return one object of the IT array?

did you typo the [at the beginning? Because this is not valid json. — user13258211
– user13258211, Commented Jun 24, 2020 at 11:39

Barremian · Accepted Answer · 2020-06-24 12:17:00Z

I see multiple issues.

You don't need to define the properties IT and EN as arrays in the JSON file. It could very well be plain JS objects.

{
  "IT": {
    "name": "Nome",
    "surname": "Cognome",
    "email": "E-mail",
    "cf": "Codice fiscale",
    "phone": "Cellulare",
    "age": "Età",
    "city": "Città",
    "job": "Lavoro" 
  },
  "EN": {
    "name": "first name",
    "surname": "last name",
    "email": "E-mail",
    "cf": "Fiscal code",
    "phone": "Phone",
    "age": "Age",
    "city": "City",
    "job": "Job" 
  }
}

There is no need for two different interfaces. You could assign one single interface.

export interface Details {
  name: string;
  surname: string;
  email: string;
  cf: string;
  phone: string;
  age: string;
  city: string;
  job: string;
}

You are defining the type as array in Langs interface instead of the defined details interface. You could do something like

export interface Langs {
  IT: Details;
  EN: Details;
}

At the moment you're wrongfully returning the subscription instead of the observable from the function. You could return the observable from the service and subscribe to it the component controller.

Service

translate(language: string): Observable<Details> {
  return this.http.get<Langs>('assets/json/translate.json').pipe(
    map(response => response[language])
  );
}

Component

ngOnInit() {
  this.translateService.translate('IT').subscribe(
    details => { this.details = details },
    error => { }
  );
}

Template

<span>{{ details?.name }}</span>
<span>{{ details?.surname }}</span>
<span>{{ details?.email }}</span>
...

Working example: Stackblitz

The object details return undefined, and the json file give me an error on the comma
Yes there was a syntax error in the JSON file, I've since updated the code. Please try now.

Collectives™ on Stack Overflow

JSON object interfaced return undefined

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related