Ionic 2 - renders an array of objects [object, object]

The following code snippet shows how I use array push:

let results = this.allExercises[i];
this.dataArray.push(results);

To pass data with navParams and navigate to a new page, I do the following:

this.navCtrl.push(HomePage, {
    'exercisesDone': this.dataArray
});

In my HomePage component, I retrieve the passed data like this:

constructor(public navCtrl: NavController, public params:NavParams) {
      if(params.get("exercisesDone")){
        this.exerciseIsDone = params.get("exercisesDone");
        console.log('exerciseDone: ', this.exerciseIsDone);
      }
  }

Here is the output: https://i.sstatic.net/Qd8FL.png

And in my HTML template file, I display the values like this:

<p>{{ exerciseIsDone }}</p>
<div *ngFor="let b of exerciseIsDone; let i = index">{{ b }}</div>

The current outcome looks like this:

<p>[object Object], [object Object],[object Object]</p>
<div>[object Object]</div>
<div>[object Object]</div>

How can I properly print the values stored in the array?

Answer №1

You are displaying the object. The correct format is:

<div *ngFor="let c of completedExercises; let i = index">{{c.done}}{{c.exercise}}{{c.path}}</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

Exploring PrimeNG's method for expanding and collapsing groups

I'm attempting to incorporate two buttons that can be used to either expand or collapse all the groups in my code utilizing primeNG. Below is the functioning code: PLUNKER <p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" grou ...

The Angular program is receiving significant data from the backend, causing the numbers to be presented in a disorganized manner within an

My Angular 7 application includes a service that fetches data from a WebApi utilizing EntityFramework to retrieve information. The issue arises when numeric fields with more than 18 digits are incorrectly displayed (e.g., the number 23434343434345353453,3 ...

Guide to positioning an icon at the center of a material card

I am new to CSS and Angular Material, and I need help centering the icon on the card following the design from Figma. I tried copying the CSS from Figma, but it didn't center the icon as expected. Can someone please share techniques to achieve this? S ...

Can you please explain how to upload an image and save it in the assets folder in Angular

Is there a way to upload an image in Angular and store it directly under the Assets folder, without the need for an API? ...

Is it possible for me to disable the eslint typedef rule for destructuring within lambdas?

Is it possible to disable the typedef rule only for array or object destructuring in lambdas? getPersonsNames(): string[] { type Person = { name: string; age: number }; const persons: Person[] = [ { name: `Jan Kowalski`, age: 12 }, ...

What are the steps to locally test my custom UI library package built with tsdx in a React.js project

I am currently utilizing tsdx to develop a React UI library, and I am looking to test it within my Next.js project before officially publishing it to the npm package. Initially, I attempted using npm link, which worked initially. However, when I made ch ...

Encountered a 'angular is not defined' error message when attempting to upgrade an AngularJS1 component

I am currently in the process of upgrading AngularJS1 components to Angular6. My approach involves creating wrappers for all existing AngularJS1 components by extending "UpgradeComponent" and placing them under the folder "directive-wrappers" in my example ...

What is the best way to grab an uploaded file in Angular, similar to how we capture the values of text boxes?

The application I am working on consists of five pages. Users are required to upload a file, and that same file needs to be displayed on other pages when the user loads them. Is there a way to achieve this functionality using Angular? ...

Is there a way to get UseMemo to recognize the value from zod validation?

Having trouble resolving an error in my code. I used zod for data validation and tried using the useMemo function, but when I input the value that has been validated by zod, an error occurs as shown in the image. I even tried adding an index to the value, ...

Why is the angular navigation bar not appearing on the screen?

Currently, I am in the process of learning Angular through a Udemy course instructed by Maximilian Schwarzmuller. One of the topics he covers is creating a navigation bar. I have tried to implement the same code for my navigation bar, but unfortunately, it ...

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

Manipulating and inserting objects into an array using React and Typescript with an undefined type

As I embark on my TypeScript journey in React, I decided to test my knowledge by creating a simple Todo App. Everything seems to be working fine except for one issue! After adding a new task and hovering over it, I received the following error message (tr ...

Managing startup errors in Angular 2

Is there a way to capture startup errors such as compilation or dependency injection errors and display a meaningful message instead of just showing 'loading' on a blank page? Using try/catch with bootstrapModule may work in some scenarios: try ...

Experiencing difficulty in triggering a NextUI Modal by clicking on a NextUI Table Row

In the process of developing my web portfolio, I am utilizing NextJS, TypeScript, and TailwindCSS. A key feature on my site involves displaying a list of books I have read along with my ratings using a NextUI table. To visualize this functionality, you can ...

Enhance your drag and drop experience with Angular CDK by customizing placeholder height dynamically

I am looking to dynamically set the placeholder height based on the height of the dragging element. Currently, I have a static placeholder height set to the smallest possible element height. I have searched for information on how to achieve this dynamic h ...

TypeScript perplexed Babel with its unfamiliar syntax and could not compile it

Encountered a problem while attempting to compile typescript. It appears that babel was unable to comprehend the "?." syntax on the line node.current?.contains(event.target) export function useOnClickOutside(node: any, handler: any) { const handlerRef = ...

No output was generated by the emitted Typescript on Trading View

Currently, I am working with a combination of vuejs and nuxtjs for my project. I have been trying to incorporate Trading View into it, but when attempting to import the charting_library.min.d.ts file in the Vue component, an error is returned. Module bu ...

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

I have encountered an issue while working with arrays. I am initializing two arrays - one with some values and another as empty. However, when I assign the items from the first array to the second array and then clear the first array, it unexpectedly clear ...

Guide to effectively utilizing the ng-bootstrap Typeahead component within a Reactive Form

I've been attempting to implement the ng-bootstrap Typeahead component on a Reactive Form in Angular 2, but despite referencing the example code provided in Typeahead's documentation, I can't seem to get it working. Here is what my current ...

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...