Retrieve Json data from an external API in Angular by utilizing the HttpClient module

Question

Retrieve Json data from an external API in Angular by utilizing the HttpClient module

Being a novice in angular, I am experimenting with fetching data from an external API. Although I managed to retrieve the data successfully on the console, I encountered errors when attempting to display it on the screen. Below are the details of my setup: I'm using angular version 5.2.10 and CLI version 1.7.4. I have checked all the imports and also sought help from various forums. Any assistance would be greatly appreciated.

Below is the snippet from my Service class:

---

In addition, here's the relevant portion from my Component class:

---

The template file for rendering the data looks like this:

---

If you wish to access the JSON API directly, you can visit this link:

Lastly, here are the class files containing the necessary model definitions:

---

And lastly, the error message that I've been encountering:

---

json angular

Answer 1

Answer №1

The issue lies in how you are setting the data and iterating to display all the teams.

1- The Team Service returns a JSON Object {} instead of a JSON Array, so you should adjust the casting from

<TeamData[]>

to

 <TeamData> or any.

2- You are trying to assign a JSON Object response to a JSON Array variable after fetching the data.

3- Each team in the table should have its own row, not the entire div containing the table. Therefore, you need to iterate through the teams.

4- There is unnecessary looping in the html template, remove those loops as they are not required.

Answer 2

The issue lies in how you are setting the data and iterating to display all the teams.

1- The Team Service returns a JSON Object {} instead of a JSON Array, so you should adjust the casting from

<TeamData[]>

to

 <TeamData> or any.

2- You are trying to assign a JSON Object response to a JSON Array variable after fetching the data.

3- Each team in the table should have its own row, not the entire div containing the table. Therefore, you need to iterate through the teams.

4- There is unnecessary looping in the html template, remove those loops as they are not required.

Answer 3

Answer №2

The response from the API is an object, not an array.

{
  "_links": {},
  "count": 24,
  "teams": Array[24][]
}

Below is a snippet of code that should function correctly for displaying team data:

<p>Teams</p>
<div class="container">
    <div class="table-responsive" *ngIf="teamData">
      <p>{{teamData.count}}</p>
      <p>{{teamData.links}}</p>
      <div *ngFor="let t of teamData.teams">
        <table class="table table-hover">
          <thead>
            <th>Team Name</th>
            <th>Short Name</th>
            <th>Market Value</th>
            <th>Logo</th>
          </thead>
          <tbody>
          <tr >
            <td>{{t.name}}</td>
            <td>{{t.shortName}}</td>
            <td>{{t.squadMarketValue}}</td>
            <td><img src = {{t.crestUrl}} alt = "logo"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>

Answer 4

The response from the API is an object, not an array.

{
  "_links": {},
  "count": 24,
  "teams": Array[24][]
}

Below is a snippet of code that should function correctly for displaying team data:

<p>Teams</p>
<div class="container">
    <div class="table-responsive" *ngIf="teamData">
      <p>{{teamData.count}}</p>
      <p>{{teamData.links}}</p>
      <div *ngFor="let t of teamData.teams">
        <table class="table table-hover">
          <thead>
            <th>Team Name</th>
            <th>Short Name</th>
            <th>Market Value</th>
            <th>Logo</th>
          </thead>
          <tbody>
          <tr >
            <td>{{t.name}}</td>
            <td>{{t.shortName}}</td>
            <td>{{t.squadMarketValue}}</td>
            <td><img src = {{t.crestUrl}} alt = "logo"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>

Retrieve Json data from an external API in Angular by utilizing the HttpClient module

Answer №1

Answer №2

Similar questions

Generating complex fields for API requests using URL.Values

Navigating JSON Levels in Swift with Codable

The minimum and maximum limits of the Ionic datepicker do not function properly when selecting the month and day

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

How can you instantiate an object from a JSON file in Python by defining a class method?

Enhance your Angular app by dynamically adding classes to existing classes on a host component

Using the Va Rest Plugin to send a PUT request to Firebase in Unreal Engine 4

Accessing JSON fields containing accents in JavaScript

Exploring the world of Android JSON parsing

The Angular project I am hosting on GitHub Pages seems to be having trouble locating its files, leading to a

Exploring the symfony2 shop's read-only settings

Tips on making a forced call to `super.ngOnDestroy`

Exploring the concept of accessing multidimensional arrays in PHP using keys

Troubleshooting the accessibility issue between Docker node container and Angular/Node.js

Looking for the date in JSON with the format "dd-mm-yyyy"

Utilize Ionic Auth Connect to establish the currentSession and currentAuthenticatedUser on AWS Amplify

Leverage the data from a local JSON file within a web application built with Vue CLI 4.2.3

Error Message: Angular NullInjectorException - The provider for "[Object]" is not found

The Instagram Basic Display API encounters an issue when processing a request for a user profile that does

I incorporated JSON into my codeigniter project as follows