Tips for showing a JSON web response in an Angular template

Having trouble displaying JSON data received as an HTTP web response.

Check out my HTTP request method below:

nodes: any;

ngOnInit(): void {
    // Sending HTTP request:
    this.http.get('/assets/TEST.json').subscribe(data => {
        // Assigning JSON response to nodes.
        this.nodes=data;
    });
}

Now, here's the template code:

<div *ngFor="let node of nodes">
    <p>{{node.description}}</p>
</div>

This is the JSON data being used:

{
    "id": 1,
    "name": "root1",
    "link": "/login"
}

Encountering the following error in console:

Cannot find a differ supporting object '[object Object]' of type 'root1' where root1 is a different component from the original request.

Answer №1

Upon further investigation in the comments, we have discovered the solution:

  • *ngFor should not be utilized here as the JSON is an object, not an array.

Therefore, the resolution is simple:

<p> id : {{nodes.id}}</p>
<p> name : {{nodes.name}}</p>
<p> link : {{nodes.link}}</p>

Answer №2

To begin with, it's worth noting that your JSON data is structured as an object rather than an array. Therefore, the ngFor directive cannot be used in this case. Since the object lacks a description property and instead has a name property, one way to display the name (assuming that nodes have been properly set) is by utilizing the following template:

<p *ngIf="nodes">{{ nodes.name }}</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send multiple files and text input data simultaneously to a Jersey REST service using multipart format?

I am in need of sending JSON data along with multipart file data to a Jersey REST service. The service should receive this data as a bean and then extract both the multipart file data and textbox data from that bean object. It is important to note that t ...

Adding classes dynamically in Angular 2 app functionality

With this particular layout in mind: <li role="menu" class="drop-down"> <a class="drop-down--toggle"> <span class="flag-icon" [class]="_current.flag"//<-- don't work></span> </a> <ul class="drop-down--men ...

JSON: Transforming an object into an array

This is my first time experimenting with JSON, and I need to receive a list of JSON elements. The task requires me to inspect the code for these elements and convert them from objects to arrays. For example: { "key": "my key", "value": "my ...

Unable to fetch JSON data, resorting to ngResource

I am currently working on a small football application project, aiming to enhance my skills with Angular 1 before moving onto Angular 2. I encountered some difficulties while trying to fetch JSON data from a specific URL. Although there is no Angular JS e ...

sending data in json format to cfhttp parameter

In my ColdFusion 2016 project, I am using the following code: <cfhttp method="put" url="https://www.colorfulapi.com/testpage/#arguments.Name#" username="#request.APIusername#" password="#request.APIToken#" result="results"> <cfhttpparam type= ...

Obtaining Axios response header in a Typescript environment

I am currently working on a rest call that may return a header that I need to store. In order to do this, I have to first check if the header is present before storing it. Here is how I approached it: private getHeader(response: AxiosResponse) { if (r ...

Parsing JSON data into a Lua table

Can someone assist me with extracting data from a JSON API response? { "Global Quote": { "01. symbol": "GLG", "02. open": "0.4780", "03. high": "0.4800", "04. low": "0.4650", "05. price": "0.4760", "06. ...

Guide on importing a module dynamically in a NodeJS script with custom path aliases set in tsconfig.json

Our project utilizes React and Typescript along with Nx, WebPack, and Babel. Within our monorepo, we have a multitude of applications. To enhance our i18n efforts, I am currently developing a git hook that will scan each application directory and generate ...

Manipulating the user interface in react-leaflet using the plus and minus control options

How can I eliminate the "+" and "-" symbols from my react-leaftlet map container? https://i.sstatic.net/3DDsV.png Below is my mapContainer code: <MapContainer center={[0.0, 0.0]} zoom={2} attributionControl={false} doubleClickZoom={fal ...

Adding to the Year Column in MySQL

I currently have the following MySQL format: {"2017": {"1": {"payed": 0, "charge": 0}}} Previously, I successfully used this format to execute SQL queries (such as reading/updating payed and charge values). However, I am facing an issue when trying to ad ...

How to retrieve static attributes while declaring an interface

class A { public static readonly TYPE = "A"; } interface forA { for: A.TYPE } I am facing an issue while trying to access A.TYPE from the forA interface in order to perform type guarding. The error I encounter is: TS2702: 'A' only refe ...

Getting JSON data from a simple_tag in Django

Just starting out with Django and I've successfully integrated amchart with my application. I created a simple_tag method to populate dataProvider with a value. Below is my amchart code: var chart = AmCharts.makeChart("chartdiv-{{ server.id }}", { ...

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

Oops! Your file couldn't make it to Firebase Storage in Angular

I have been working on creating an upload function to upload files or images to my Firebase database storage. I have ensured that the correct API key is placed in the environment.ts file and imported into app.module.ts as AngularFireModule.initializeApp(en ...

Incorporating Json.Net into a Unity3D game development venture

After adding the Json.Net library to Visual Studio 2013 using NuGetpackage and installing it for NetFramework 4.5, everything seemed fine in Visual Studio with no errors when adding using Newtonsoft.Json; However, when working with Unity3D 5.0, an error ...

Is there a method to convert distorted JSON data into a Python object?

Upon hitting an API, I receive JSON data which I attempt to load into Python using json.loads(response.text). However, I encounter a delimiter error. Upon further inspection, I noticed that some fields in the JSON lack the "," delimiter. { "id":"142379", ...

Solutions for repairing data storage variables

I am trying to access the value dogovor from session_storage and assign it to variable digi. However, I seem to be encountering an issue with this process. Can anyone help me identify where I am going wrong? loadCustomer(){ return new Promise(resolve =& ...

Obtaining data from JSON arrays

My current challenge involves extracting data from the following link: and storing it in my database. However, I am encountering difficulties with manipulating the array in order to retrieve the last unix datetime. Despite multiple attempts to extract th ...

Issues with FullCalendar functionality in CakePHP 1.2.5 are arising when using jQuery version 1.4.1

Currently, I am encountering an issue with fetching events data through a URL that returns JSON data. Surprisingly, the code works flawlessly with jQuery 1.3.2, however, it throws errors when using jQuery 1.4.1. The specific error message displayed in the ...

Guide on transmitting a dictionary using Python's HTTP server and client

I have implemented a server/client structure using the python libraries http.server and http.client. In this setup, the server is continuously running while the client sends requests. Whenever the server receives a call, it triggers a scraper function tha ...