Read an External JSON file in Angular 4 and Convert Data to HTML Table

You can use the HttpClient service in Angular 4 to read and extract data from an external JSON file. Using the Get() method of HttpClient class, you can easily open and read data from a JSON file. Here in this post, I am sharing a simple example on how to read JSON data from a file and convert the data to an HTML table.

JSON or JavaScript Object Notation, as you know is a data format that allows you to conveniently store and share data using any medium. JSON is language independent and can be easily bind with any kind of application. You can use JSON data in your Angular 4 applications.

The JSON Data

Here’s a sample data in JSON format. I have saved the data in a file

[{
    "ID": "3",
   "Name": "Pakistan",
    "Type": "Asia",
    "Currency": "Rupees"
},
{
    "ID": "4",
    "Name": "China",
    "Type": "Asia",
    "Currency": "Chinese Yuan" 
},
{
    "ID": "33",
    "Name": "Bangladesh",
    "Type": "Asia",
    "Currency": "Taka" 
}]

for Detail
Go