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

Question

Это мой 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. Я действительно не понимаю, в чем может быть проблема здесь.

Answer 1

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

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

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

Answer 2

Вы пытаетесь провести 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;
  }
)

Answer 3

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

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