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;
}
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);
}, () => {
}
);
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.