Как извлечь данные из файла json в angular 7 - PullRequest
Новая
       7

Как извлечь данные из файла json в angular 7

0 голосов
/ 24 февраля 2020

Это мой doma.component.ts файл: 

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-doma',
  templateUrl: './doma.component.html',
  styleUrls: ['./doma.component.css']
})
export class DomaComponent implements OnInit {

  constructor(private http:HttpClient) { }

  auti=[];
  dohvatiPodatke=function(){
    this.http.get("http://localhost:9999/auti").subscribe(
      (res:Response) => {
        this.auti=res.json();
      }
    )
  }

  ngOnInit(): void {
    this.dohvatiPodatke();
  }

}

мой doma.component.html: 

<h1>Auti</h1>

<table>
    <th>Marka</th>
    <th>Model</th>
    <th>Cijena</th>

    <tr *ngFor="let auto of auti">
        <td>{{auti.marka}}</td>
        <td>{{auti.model}}</td>
        <td>{{auti.cijena}}</td>  
    </tr>
</table>

и мой json файл: 

{
    "auti":[
        {
            "marka": "Mercedes",
            "model": "AMG",
            "cijena": "200000"
        },
        {
            "marka": "Seat",
            "model": "Leon",
            "cijena": "150000"
        }
    ]
}

Я успешно скомпилировал и запустил проект, но получил только структуру таблицы без данных. До этого я запустил сервер json на своем порту 9999, и я могу получить к нему доступ через localhost/9999/auti. Я действительно не понимаю, в чем может быть проблема здесь.

Ответы [ 3 ]

0 голосов
/ 24 февраля 2020

Храните json в папке активов

Используйте относительный путь для чтения: 

auti=[];
  dohvatiPodatke=function(){
    this.http.get("./assests/auti-jsonfile.json").subscribe(
      (res:Response) => {
        this.auti=res;
      }
    )
  }
0 голосов
/ 24 февраля 2020

Вы пытаетесь провести l oop над родительским объектом вместо дочернего массива. Заменить this.auti=res.json(); на this.auti=res.json().auti;. Таким образом, обратный вызов HTTP будет выглядеть как 

this.http.get("http://localhost:9999/auti").subscribe(
  (res:Response) => {
    this.auti=res.json().auti;
  }
)
0 голосов
/ 24 февраля 2020

Может быть попробовать это: 

this.http.get("http://localhost:9999/auti").subscribe(res => this.auti = res)
...