CODEWITHSUNDEEP
jsonangulartypescriptprimeng
Tanzeel
Tanzeel

Reputation: 4998

How to read a local JSON into Angular typescript file

I'm using primeng Datepicker. It's [locale] property accepts languages that I'm storing in a local json called datePickerLanguages.json:

{
    "DatePickerLanguages": [{
            "spanish": {
                "firstDayOfWeek": 1,
                "dayNames": ["domingo", "lunes", ...],
                "dayNamesShort": ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
                "dayNamesMin": ["D", "L", "M", "X", "J", "V", "S"],
                "monthNames": [
                    "Enero",
                    "Febrero",
                    ...
                    "Diciembre"
                ],
                "today": "Hoy",
                "clear": "Borrar"
            }
        },

        {
            "german": {
                "firstDayOfWeek": 1,
                "dayNames": ["Sonntag", "Montag",...]
                ...
                "today": "Heute",
                "clear": "Klar"
            }
        }
    ]
}

I've to pass spanish, german or any other language (one language at a time) into the [locale]=xxxxx of p-calendar. My typescript is:

import { Component, OnInit, VERSION } from "@angular/core";
import languages from "./datePickerLanguages.json";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  value;

  languageList: {}[] = languages;

  selectedLocale;

  ngOnInit() {
    this.selectedLocale = this.languageList.spanish;
  }
}

template file:

<p-calendar [(ngModel)]="value" name="test" [locale]="selectedLocale">
</p-calendar>

I'm getting:

Property 'spanish' does not exist on type '{}[]'.

This is what I followed: How to Read Local JSON file in Angular

Here is the stackblitz.

Please point out my mistakes.

Upvotes: 0

Views: 164

Answers (1)

subodhkalika
subodhkalika

Reputation: 2237

Try this:

languageList: {
    'DatePickerLanguages'
  }  = languages;

ngOnInit() {
    this.selectedLocale = this.languageList.DatePickerLanguages[0].spanish;
}

If you have control over the JSON file. I would suggest you to modify your JSON as such:

{
    "DatePickerLanguages": {   // Initialized it as object instead of array. 
            "spanish": {
                  ....
            },
            "german": {
                  ....
            }
    }
}

And access the spanish by using:

this.selectedLocale = this.languageList.DatePickerLanguages.spanish;

As per the request in your comments:

The reason to use the zeroth index in my answer is because in your JSON the "DatePickerLanguages": is an array []. The property spanish lies in the zeroth index of your array.

Upvotes: 1

Related Questions