Why am I having trouble iterating through my array object?

Trying to showcase the contents of object within an array.

However, unable to showcase any results. Why is this happening?

This is what I've attempted so far:

Demo available here: https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts

home.html

  <div *ngIf="searchResults.length > 0">
     <ion-item *ngFor="let searchResult of searchResults.details">          
        <ion-avatar item-start>
          <!--<img src="img/Rabbit-Cage.jpg">  -->  
        </ion-avatar>
        <h2>searchResult.user_id</h2>
        <h3>searchResult.email</h3>
        <p>searchResult.token</p>         
      </ion-item>     
</div>

home.ts

export class HomePage {

  searchResults = [{
    "details": [
        {
            "user_id": "73",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cdc2c9d2c9c6dfc9da9f9f9fe8cfc5c9c1c486cbc7c5">[email protected]</a>",
            "token": "217808036f0215fee13aee8925574899"
        }, 
        {
            "user_id": "94",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c1cec5dec5cad3c5d693c0c0d79393e4c3c9c5cdc88ac7cbc9">[email protected]</a>",
            "token": "f4e9a701f9dae581ecbc2abf1470f88f"
        },
        ...
        
    
  }];

  constructor(public navCtrl: NavController) {

  }

}

Check out my demo https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts

Please assist, thank you in advance!

angulartypescriptionic3

Answer №1

It seems there was a mistake made here with the code searchResults.length > 0. The correct way to write it is 

searchResults?.details?.length > 0

For a working example, you can check out this stackblitz link

<div *ngIf="searchResults?.details?.length > 0">
   <ion-item *ngFor="let searchResult of searchResults?.details">         
      <ion-avatar item-start>
        <!--<img src="img/Rabbit-Cage.jpg">  -->  
      </ion-avatar>
      <h2>searchResult.user_id</h2>
      <h3>searchResult.email</h3>
      <p>searchResult.token</p>         
    </ion-item>     
</div>

Alternatively

If you prefer without using *ngIf

<div>
     <ion-item *ngFor="let searchResult of searchResults?.details">         
        <ion-avatar item-start>
          <!--<img src="img/Rabbit-Cage.jpg">  -->  
        </ion-avatar>
        <h2>searchResult.user_id</h2>
        <h3>searchResult.email</h3>
        <p>searchResult.token</p>         
      </ion-item>     
</div>

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

Angular - Ensure completion of a function call before continuing with the code execution

I'm currently working on developing a code snippet that checks for potential adverse drug reactions between two medications. Within my checkForClash() function, there is a call to getCollisionsList(), which is responsible for populating the interacti ...

javascriptangularasynchronousfrontend

What triggers the execution of the catch method while chaining HTTP promises?

In my Angular application, I have developed a custom loaderService that displays a loading spinner while the back-end processes requests. Below is the code snippet: export class ComponentOne { constructor(loaderService: LoaderService, orderService: Orde ...

angularhttptypescriptpromise

Utilize Angular 5 to implement document uploads through a REST service call

I've been attempting to upload a document to our repository using Angular 5 and I'm encountering an error that I've included below. The Multipart/Form code is very similar to what worked in Angular 1.x, except for one line difference in the ...

angular

Angular ngClass and ngIf directives failing to update upon alterations

In my current Angular project, I am working on a functionality where I need to dynamically change a class based on a variable without having to refresh the page. I have experimented with *ngIf/else and [ngClass] directives, which do work, but unfortunatel ...

javascriptangular

Encountering an error with 'ng serve' on a recently established Angular project

After installing nodejs and Angular on my Windows 11 machine, I created a project using the ng new command. However, when I tried to run it with ng serve, I encountered the following error: c:\working\projects\xxxxxxx\xxxxxx-site>ng ...

angularwindowsangular-fullstackserveng

Running the ng serve --o command on Windows cmd results in the command prompt closing

Whenever I execute the command: ng serve --o The process closes abruptly in Windows cmd, preventing me from using ctrl+C to terminate the running angular application. ...

angularwindowsnpmcmd

Angular 2 does not recognize the element 'child-selector' as valid

In my quest to establish communication from a child component to a parent component based on certain actions, I have incorporated the use of both EventEmitter and Output libraries. Let me walk you through what I have achieved thus far. Firstly, let's ...

angularexpressangular2-template

Is it possible to create a function that only accepts a union type if it includes a specific subtype within it?

Is there a way to define the function processArray so that it can handle arrays of type string[], without explicitly mentioning individual types like type1 or type2? For instance, could we indicate this by using arr: type1 | type2? The objective here is t ...

typescript

What is the best way to define several mapped types in TypeScript?

Imagine you have the following lines of TypeScript code: type fruit = "apple" | "banana" | "pear" type color = "red" | "yellow" | "green" You want to define a type that includes a numeric propert ...

typescripttypes

Tips for utilizing multiple ngFor directives for property binding within a single directive

After implementing the ng-drag and drop npm module with the draggable directive, I encountered an issue while trying to display a list of items from a 2D array using li elements. Since multiple ngFor's are not allowed in Angular, I needed to come up w ...

javascriptarraysangularangular2-directivesproperty-binding

Working with VsCode, @angular/cli, and implementing Bing Maps v8 typings

I am completely baffled by the challenges of getting everything to work harmoniously. My current version setup includes: VsCode v1.13.1 node v6.9.1 npm v5.1.0 @angular/cli v1.2.0 @angular v4.0.0 bingmaps v1.0.14 typescript v2.4.1 typings v2.1.1 Despite ...

angularnpmangular-clibing-mapstypescript-typings

Leveraging TypeScript unions within functions to handle and throw errors

As a newcomer to TypeScript, I've encountered an odd error that I need help with. I have various objects sending data to the server and receiving fresh data back of the same object type. These objects use a shared method for sending the data, so I ap ...

typescripttypescript-typings

Observable not defined in facade pattern with RxJS

(After taking Gunnar's advice, I'm updating my question) @Gunnar.B Tool for integrating with API @Injectable({ providedIn: 'root' }) export class ConsolidatedAPI { constructor(private http: HttpClient) { } getInvestments(search?: ...

javascriptangulartypescriptrxjsarchitecture

Angular: how to manually trigger change detection without using Angular's dependency injection system

Is there a way to globally initiate angular change detection without having to inject something like ApplicationRef? I am looking to utilize the functionality as a standard JavaScript function rather than a service method, in order to avoid the need for ...

angulardependency-injectionangular2-changedetection

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

Enable Ace Editor's read-only mode

I'm having some difficulty getting my ace-editor to work in read-only mode. I'm working with Angular 9 and I've attempted the following approach: In my HTML file, I have the following code: <ace-editor mode="java" theme="m ...

angularjstypescriptangular9ace-editor

Exploring the process of dynamically updating a form based on user-selected options

I need assistance with loading an array of saved templates to be used as options in an ion-select. When an option is chosen, the form should automatically update based on the selected template. Below is the structure of my templates: export interface ...

javascriptangulartypescriptionic-framework

There was an error encountered trying to access the options (URL) with a 405 method not allowed status. Additionally, the request to load the (URL) failed with a response indicating an

I attempted to retrieve data from an API using httpClient in Angular 5, but encountered errors. Below are the issues I faced: 1) ERROR: when trying to access http://localhost:8080/api/getdata, I received a 405 error (method not allowed). 2) ERROR: failed t ...

angulartypescript

Getting meta values in Angular2 is a common task that can be achieved through

Is there a way to retrieve the meta value from the HTML head in Angular2? For instance, let's say I have the following HTML structure of my project and I want to extract the meta tag with the name "userId". <!doctype html> <html> <he ...

angularangular-cli

Issue updating Bootstrap in ASP.Net Core 2.1 with Angular Template

Every time I start a new ASP.Net Core 2.1 project with the angular template and try to update the bootstrap version from 3 to 4 in package.json, it ends up breaking my application. Despite numerous attempts such as deleting the node_modules folder and rein ...

angularasp.net-coreasp.net-core-2.1