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

Is it necessary to conceal Angular navigation controls when the user is not authenticated?

In Angular, is there a standardized method for hiding controls when the user is not logged in? We already have the CanActivate guard which checks if a user can access a route. Would it be better to hide the route initially if the user is not logged in or l ...

angulartypescriptauthenticationauthorization

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

After working as a React developer for quite some time, my workplace recently introduced Typescript, which I am still getting familiar with. I implemented a custom hook for managing cookies, but the function it returns is generating an error. Here's ...

javascriptreactjstypescript

The Uncaught SyntaxError issue arises when configuring webpack and Karma together

I am setting up webpack + karma + angular 2 and encountering a Uncaught SyntaxError : Unexpected token import. I am puzzled by the cause of this error. When I execute $karma start, it throws this error. Please assist me. Error START: webpack: bundle is ...

angularwebpackkarma-runner

Cache for JSON Schema in VS Code

After updating to TypeScript 1.5 (now out of beta), I am eager to utilize the json schema helpers in VS Code. Upon configuring tsconfig.json, I noticed that only commonjs and amd module options are available, while umd and system are missing based on this ...

typescriptvisual-studio-code

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction

We are currently working on a screen that requires the following development: This screen will have the following features: When clicking on a button, the fields should become editable. In the image provided, there is some repeated data, but in our case, ...

javascripthtmlangular

Creating callback functions that vary based on input variables

Consider the following code snippet, which may seem somewhat contrived: arbitraryFunction( // Input that is dynamically generated [ returnValue("key1", "a"), returnValue("key2", 1), returnValue ...

typescripttypescript-typings

angular pipe and tap methods fail to execute the designated function

I am encountering a problem when calling a function in my login service. I have tried using a pipe and tap. Interestingly, when I use res => console.log(res), it outputs the desired result. However, when I attempt to call a function, it seems that the ...

angularrxjsangular7

TS2339: The attribute 'size' is not present on the 'string' data type

Within my Typescript file, I have the following line: return stringToValidate.length <= maxLength; Despite the code executing without issues, an error is displayed: TS2339: Property 'length' does not exist on type 'string'. I am cu ...

typescript

How can you avoid inspecting webpack internal code when debugging in Visual Studio Code with React Typescript or NextJS?

While debugging NextJS Typescript, the Visual Studio Code debugger seems to be stepping into webpack-internal generated source files. The launch.json file in Visual Studio code is configured as: { "version": "0.2.0", "configura ...

reactjstypescriptvisual-studio-codenext.jsvscode-debugger

Angular Update Component on Input ChangeEnsuring that the component is automatically

<div class=" card-body"> <div class="row"> <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active" *ngFor="let subject of subjects"> <div class=" fon ...

htmlangulartypescript

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

I am currently facing a situation where I have an application with an existing user base. I am looking to avoid disrupting their current links for a smoother transition. However, the previous links are in this format: (server)/viewer/#/?id=12. Please see t ...

javascripthtmlangulartypescript

Conceal the initial value in a dropdown menu in a React component

I've set up a codesandbox to demonstrate the issue (https://codesandbox.io/s/practical-flower-k6cyl?file=/src/App.tsx) Is there a way to prevent the "AGE" text (first option) in the select box from being selected again? It should only be visible when ...

reactjstypescript

Angular 2+ NgOnInit sets a value for an input array, however, it results in an error message stating that

One of the components in my application requires specific inputs, with the feedList being the most important one. Within the feedList, there are feed objects containing various data fields. However, some of these fields may be undefined depending on the fe ...

angularundefinedangular-templateangular-inputangular-template-variable

Does a typescript module augmentation get exported by default when included in a component library?

Utilizing material-ui and Typescript, I developed a component library. By implementing Typescript module augmentation, I extended the theme options as outlined in their documentation on theme customization with Typescript. // createPalette.d.ts/* eslint-di ...

reactjstypescriptmaterial-uimodule-augmentation

Edit CSS attributes within Angular 2+ framework

When using jQuery, we have the ability to do the following: JQuery('.someStyle') .css({"background", "red"}) This allows us to directly change the CSS property in style. While working with Angular 2+, we can use [style.<property>] for ...

javascriptangularangular2-template

Unexpected patterns observed when utilizing parent/child routing files

I am working with a Node/Express backend that is implemented using TypeScript. Whenever I make changes to a file and save it, if I test the root route in Postman localhost:8000/, I receive the expected response. However, when I test localhost:8000/user af ...

javascriptnode.jstypescriptexpressroutes

How to globally install electron using NPM on Ubuntu

Encountering an issue while trying to resolve this problem. Upon installing electron globally using NPM, the following error is displayed: ole@mki:~/angular-electron$ sudo npm install electron -g /usr/bin/electron -> /usr/lib ...

node.jsangularubuntunpmelectron

Have you made a selection in both bi-directional bound select dropdowns?

I have implemented two-way binding on select dropdowns using ngFor, and they are functioning correctly. However, upon page load, no option is selected by default. I attempted to use [selected] but it did not work... Any ideas on how to resolve this? Code: ...

angular

Dealing with implicit `any` when looping through keys of nested objects

Here is a simplified example of the issue I am facing: const testCase = {a:{b:"result"}} for (const i in testCase) { console.log("i", i) for (const j in testCase[i]){ console.log("j", j) } } Encountering ...

typescript

What is causing my auth0 token to expire upon refreshing the page or clicking a link in my Angular application?

I've implemented authentication in my Angular single-page application using auth0. I followed a tutorial on their website: https://auth0.com/docs/quickstart/spa/angular2 After completing the login tutorial, everything seemed to be working fine. impo ...

angularauthenticationtokenauth0