The type 'AA' cannot be assigned to the type 'NgIterable<any> | null | undefined' within an Angular context

Having two interfaces, Response and Info, where Response includes an array and object. Using the ASYNC Pipe, I aim to display data from a provided URL. The Result is in Array format and Info is an Object. However, when trying to display the value of Info, I encounter the following error:

**Error TS2322: Type 'Info' is not assignable to type 'NgIterable | null | undefined'.**

      **Model Interface** 
       interface Response {results: Result[];info: Info; }
       interface Result { gender: string; email: string;}
       interface Info { seed: string;results: number;}

       **TS**
        customerObs = this.http.get<Response>('https://randomuser.me/api/?format=json');
        constructor(private http: HttpClient) { }

        HTML 
        <ul *ngIf="customerObs | async as response">
              <li *ngFor="let result of response.results">{{result.gender}}</li>
              <li *ngFor="let info of response.info">{{info.seed}}
       </ul>
jsonangulartypescriptasync-pipenested-json

Answer №1

After some troubleshooting, I managed to get it to work by making a simple change from using *ngFor to *ngForOf

<li *ngFor="let data of responseData.data">{{data.item}}

to

<li *ngForOf="let data of responseData.data">{{data.item}}

If you want more information, check out this link:

Answer №2

When using *ngFor, it's important to remember that it can only be used with arrays or sets. In this case, the variable Info is not an array but an object, leading to the error you encountered.

       interface Response {results: Result[];info: Info[]; }

To fix this issue, you have two options:

1. Convert Info into an array:

         interface Response {results: Result[];info: Info[]; }

2. Update your HTML code to access the seed property of the info object:

              <li>{{response.info.seed}}

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

Analyzing information in JavaScript using Selenium

Currently, I am facing an issue while trying to extract data from a JSON file using JavaScript. I am able to successfully read data from the file, but when I try to pass this data within my code, it results in errors. Any guidance or assistance on this mat ...

javascriptjsonseleniumnightwatch.js

I'm having trouble establishing a connection with the Appwrite platform

Encountered an issue while trying to connect to appwrite. The specific error message is: Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL at Account.<anonymous> (appwrite.js?v=d683b3eb:932:19) at Generator.nex ...

reactjstypescriptappwrite

Determining an individual object's group percentile in Postgres

My application includes a table for assessments. Each assessment evaluates individuals on various levels and is linked to a specific group. Here's an example: id: 'some-assessment', user_id: 'some-user', group_id: 'some-group ...

sqljsonpostgresqlpostgresql-9.3

What are the advantages of utilizing the HttpParams object for integrating query parameters into angular requests?

After exploring different ways to include query parameters in HTTP requests using Angular, I found two methods but struggled to determine which one would be the most suitable for my application. Option 1 involves appending the query parameters directly to ...

javascriptangulartypescriptangular-httpclient

Converting a JSON object into a C# class and then deserializing it

Hi there! I am currently working on sending a request/response and then reading the data using a StreamReader to convert it into a string. The data is in JSON format, and I need to make this JSON string readable by converting it into an object so that I ...

c#asp.netjsonjson.net

Problem encountered when trying to load JSON data using ajax

I encountered the following issue : SyntaxError: missing ; before statement {"users":[{"name":"A Lindsay","active":true,"id":"","login":"alindsa This is how the JSON data appears: { "users": [{ "name": "A Lindsay", "active": tr ...

jqueryjsonajax

The parameter type 'number[]' does not match the expected type 'number' in TypeScript. This occurs in the 'const part: number[]' argument

function generateNumberArray(arr: number[], n:number) { const sortedArr:number[] = arr.sort(); const results:number[] = []; const part:number[] = [] ; for(let i = 0; i < sortedArr.length; i++) { part.push(sortedArr[i]); ...

javascripttypescript

Retrieving a specific JSON value with javascript

Utilizing ajax, I am retrieving a small set of data from the server that returns JSON data structured as follows: { "data": [ { "id": "1", "value": "One" }, { "id": "2", "value": ...

javascriptjsonparsing

Component designed to be reusable across multiple different Angular 8 applications

I have multiple components with similar logic. Take for example: import { Component, OnInit } from '@angular/core'; import { Rule } from '@models'; import { ConfirmationDialogComponent } from '@core'; import { RulesSaveCompo ...

angulargenerics

Achieving success was like uncovering a hidden treasure chest after a successful

Is there a way to address this JSON data issue? success{"data": [{"id":"1","name":"something1"},{"id":"2","name":"something2"},{"id":"3","name":"something3"}] } The success variable contains the JSON data. This is how the server script returns the data: ...

javascriptjqueryarraysjsonajax

Guide to building a container/palette for buttons in Angular 8

I am looking to design a unique container or palette to house some of the buttons on my webpage, allowing me to customize their background color and add other effects. Here is an example of what I am envisioning, with 3 buttons (Question, Action, Output) ...

htmlangularangular-materialcontainerspalette

Checking if a route path is present in an array using Typescript and React

Here is a sample of my array data (I have simplified it here, but there are approximately 100 elements with about 20 values each): 0: odata.type: "SP.Data.ProductListItem" Title: "This is Product 1" Id: 1 1: odata.type: "SP.Data.ProductListItem" Title: ...

arraysreactjstypescriptreact-reduxreact-router

Angular 5 Material Datepicker: A Sleek and Efficient Way to

I want the Angular Material Datepicker to remain open by default when the page is loaded, appearing within a section without needing to be triggered by an input field click. Currently, I am using a Datepicker that necessitates clicking on an input field. ...

angularangular-materialangular5

Passing properties to a component from Material UI Tab

I have been attempting to combine react-router with Material-UI V1 Tabs, following guidance from this GitHub issue and this Stack Overflow post, but the solution provided is leading to errors for me. As far as I understand, this is how it should be implem ...

reactjstypescriptreact-routermaterial-ui

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Many developers rely on the commander npm package for command-line parsing. I am considering using it as well due to its advanced functionality, such as commands, help, and option flags. For my initial program version, I only require commander to parse ar ...

javascriptnode.jstypescriptnode-commander

Unrestricted Angular Audio Playback without CORS Restrictions

I am currently developing a web application using Angular4 that will include the feature of playing audio files. Unfortunately, I am facing an issue where I do not have control over the server serving the media files, and therefore cannot make any modifica ...

angulartypescript

Angular automatically scrolls to the top of the page when clicking on any part of the bottom

I am encountering an issue on a page where I have implemented NgFor. Whenever I click anywhere at the bottom of the page, it automatically jumps to the top. Additionally, when I try to click on a button at the bottom, the button's action does not exec ...

htmlangular

Tips for effectively extending a styled component with TypeScript

The latest version of styled-components, v4, has deprecated the use of .extend for extending or composing components. The recommended way to do this is shown below: const ButtonA = styled('button')`color: ${props => props.color};` const Butto ...

reactjstypescriptstyled-components

Trigger the browser to refresh translation files following the deployment

Our Angular/Ionic app utilizes the ngx-translate/core package for translations, and is hosted on Firebase. With each new build and deployment, Angular automatically creates a hash for our js files to ensure the browser fetches the latest version when chang ...

angularfirebaseionic-frameworkngx-translate

What is the process for building .ts components within a Vue application?

Looking to update an old project that currently uses the 'av-ts' plugin and vue-ts-loader to compile .ts files as Vue components. The project is running on Vue 2.4.2, but I want to upgrade it to version 2.6.14. However, since 'vue-ts-loader& ...

javascripttypescriptvue.jsvuejs2vue-component