以HTML显示JSON本地文件中的数据

Question

I'm quite new to angular 7, and I need to display (in a HTML file) some data from a JSON file stored locally.

I've already managed to get the data from the json file into an array, and I can display it in the Chrome Console, but I am not able to display it on the web interface (via HTML file)

What would be the best way to do so?

Here is my json file:

     {"latest_news": [{"title": "New Open Access Publication: EUROBENCH &
         GET2EXCEL", "link":
         "http://eurobench2020.eu/new-open-access-publication-eurobench-get2excel/"},
         {"title": "Newsletter: EUROBENCH Begins to be a reality", "link":
         "http://eurobench2020.eu/newsletter-eurobench-begins-to-be-a-reality/"},
         {"title": "EUROBENCH at ERF 2019", "link":
         "http://eurobench2020.eu/eurobench-at-erf-2019/"},   {"title":
         "RobotUnion launches its second open call with \u20ac4 million public
         funding for startups and SMEs", "link":
         "http://eurobench2020.eu/robotunion-launches-its-second-open-call-with-e4-million-public-funding-for-startups-and-smes/"},
         {"title": "Results of the 1st FSTP Open Call", "link":
         "http://eurobench2020.eu/results-of-the-1st-fstp-open-call/"}]}

Here is my news.component.ts :

 import { Component, OnInit } from '@angular/core';  import {
 HttpClient, HttpErrorResponse } from '@angular/common/http'; import
 News_webscraper_data from './news_webscraper_data.json'  import
 {News_Item} from './news_item'

 @Component({    selector: 'app-news',    templateUrl:
 './news.component.html',    styleUrls: ['./news.component.css'], })

 export class NewsComponent implements OnInit {    arrNews : News_Item
 [] = News_webscraper_data    constructor() { };

   ngOnInit() {
     console.log('Reading local json files');

     console.log('arrNews:', this.arrNews)   } }

I have created a News_Item class as follows:

export class News_Item {
  title: string;
  link : string;
}

Answer 1

You have to put your local json file in the assets folder and then fetch this local file :

import { HttpClient } from '@angular/common/http';

export class FetchDataComponent implements OnInit {

 constructor(public http: HttpClient){}

ngOnInt() {
  this.http.get('assets/latestNews.json').subscribe(res => {
              // Write your logic here.
            }, error => {
              console.log(error);
            }, () => {

            }
          );
}

}

Answer 2

You can easily display your data on a html table with a angular loop ngFor. I did a sample with your code for you :

It's your component updated, take care about ';' you forgot a lot of ; in your code and you can have lot of trouble, it's typescript no javascript.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import News_webscraper_data from './news_webscraper_data.json';
import { News_Item } from './news_item';

@Component({
    selector: 'app-news',
    templateUrl: './news.component.html',
    styleUrls: ['./news.component.css']
}
)

export class NewsComponent implements OnInit {
    arrNews: News_Item[] = News_webscraper_data;

    constructor() { }

    ngOnInit() {
        console.log('Reading local json files');

        console.log('arrNews:', this.arrNews);
    }
}

Your need to add this line in your component html :

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Link</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let new of arrNews">
            <td>{{ new.title }}</td>
            <td>{{ new.link }}</td>
        </tr>
    </tbody>
</table>

You can see I only add the structure of the table and I used the *ngFor in order to loop on you arrNews , every loop a new <tr> will be create with the title and link display under the corresponding column.