Получить данные из. json файла в angular - PullRequest
Новая
       8

Получить данные из. json файла в angular

1 голос
/ 06 марта 2020

Я создаю приложение в angular 9, у меня есть файл .json для получения данных, и я хочу получить первый элемент.

Я пробовал это из take(1), first и single(), но ни один не работал.

Как мы можем получить данные из файла JSON?

JSON

[
  {
    "username": "test",
    "password": "test",
    "firstName": "User",
    "lastName": "Test"
  },
  {
    "username": "test1",
    "password": "test1",
    "firstName": "User1",
    "lastName": "Test1"
  }
]

Component.ts 

this.authenticationService.login()
    .pipe(first())
    .subscribe(
      data => {
      console.log(data)
        if(this.loginModel.username == data.username && this.loginModel.password == data.password){
          localStorage.setItem('currentUser', JSON.stringify(data));
          this.router.navigate([this.returnUrl]);
        }
        else{
          // this.error = error;
          // this.loading = false;
          alert('Please enter correct USERNAME OR PASSWORD');
        }
      },
      error => {
        this.error = error;
        this.loading = false;
      }
    );

1 Ответ

2 голосов
/ 06 марта 2020

Поскольку ваш файл json находится в папке ваших активов, вы можете импортировать его и использовать в качестве объекта.

Вот что я обычно делаю:

JSON Файл 

{
   "LayerIds": [0, 1, 2, 3, 4, 5, 7, 8, 11, 20, 21, 22, 23],
   "HiddenLayerIds": [3, 7, 11, 21, 20, 23],
   "DefinitionExpressionColumn": "vertical_order",
   "LevelId": 7,
   "LevelFilterOutFields": "vertical_order, name",
   "SelectedLayerId": 2,
   "LevelDictionary": ["vertical_order", "name"],
   "PathwaysLayerId": 22,
   "GeometryServiceAreaUnit": "square-feet",
   "GeometryServiceLengthUnit": "feet"
}

Service.ts 

 import myJson from '../../../assets/json/config.json';

 readConfigFile() {
   return myJson;
 }

Component.ts 

ngOnInit() {
   this.mainConfiguration = this.service.readConfigFile();

   // This will print "feet" to the console
   console.log(this.mainConfiguration.GeometryServiceLengthUnit);
}

You можете пропустить шаг service и импортировать файл json прямо в ваш компонент. Но так как вы используете его как объект, я думаю, ваш файл json должен выглядеть следующим образом: 

{
 "Users": [
   {
     "username": "test",
     "password": "test",
     "firstName": "User",
     "lastName": "Test"
   },
   {
     "username": "test1",
     "password": "test1",
     "firstName": "User1",
     "lastName": "Test1"
   }]
}

Таким образом, когда вы импортируете файл json. Попробуйте Console.log(importedjson.Users);, чтобы увидеть ваши данные.

ПРИМЕЧАНИЕ: Если вы создали приложение и получили следующую ошибку:

Cannot find module ‘../../assets/SampleJson.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension

To Удалите вышеуказанную ошибку, в файле tsconfig.json под опциями компилятора нам нужно добавить конфигурации resolveJsonModule и esModuleInterop, как показано ниже. 

{  "compilerOptions": {  "resolveJsonModule": true, "esModuleInterop": true }}
...