Angular – Fetch Data with HTTP GET

In this post, we will discuss how to fetch data with HTTP Get. Let’s start by fetching the data from our json server with the HTTP Get request and display it in our dashboard using ngFor built-in directive.

In your IDE, open the dashboard.component.ts that was created from our previous topic.

http get

Here are the same codes that can easily be copied into your PC:

  • First, a ‘stocks’ array was created.
  • In the ‘subscribe’ method, instead of getting data from the web service, it is now receiving data from the array we just created.

Next, open dashboard.component.html.

http get

  • In here, we simply created an unordered list that writes down the stock id, stock name and stock code using ngFor directive.

Save your work and run it. Go to your browser and it should look like this.

http get

Success! All of the stocks have been listed correctly. Now, we will insert them into a table for a nice and clearer way to show data. To start off, go to dashboard.component.html.

http get

First, change the unordered list to a table and enclose each item into a cell.

http get

Next, we add a table header to define the columns. We are now ready to add CSS style to our table.

http get

  • Here, a <div class> is added and various table styles were added in the <table> tag.
  • ‘M-x-auto p-a-2’ is bootstrap 4 related classes and style is defined for the width.

Our new table is now ready to be tested. Run your app and go back to your browser.

http get

That’s it – you’ve successfully created a fully customized table by fetching data with HTTP Get. On the next article in the HTTP series, you will learn how to create data with HTTP post.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.