Template showing [object object]

Ionic Framework
1

Hey…ok so im a total newb to typescript, and only small knowledge of ionic, but i am having trouble doing something i thought would be very very simple.
I want to switch between two object, and show selected object in ui

Hopfully i wont need code here, as this is more a generic…so here we go.

Ok so my aim is simple, two players, both with ‘name’ and ‘score’.
one user is shown on screen, when user enters value, update score, and then set other player as active player…

this.players {p1:{name: joe, score:45},p2:{name: paul, score 66}}
this.activePlayer = this.players.p1;
enterScore(score) {
   this.activePLayer.score = score;
   this.activePLayer = this.players.p2
}

then in template i want to do
<p>name is {{activePlayer.name}}</p>

but what i get is ’ name is [object object]’

so my question is…how do i declare an object with values in typescript to use in template.
if i do <p> name is {{activePlayer | json}}</p> i get the whole object, and cant get property.

I already had joy with using an array of objects, which rendered without any PIPE, but objects are giving me trouble.

any help would be great, and even pointing me in direction of good docs, as most i found dont help mePreformatted text

2

I think you will. Having enough actual code to minimally reproduce the problem makes a huge difference to people trying to help.

1 Like
3

Hey rapropos

So here is my code from the project. this is just a test app, to get familiar with ionic/typescript
my component :

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-game',
  templateUrl: 'game.html',
})
export class GamePage {
  // players object
  players:any;
  // active player object
  activePLayer:any;

  gameDetails:any;
  sets:string;
  legs:string;
  pageTitle:string;
  lastScore:string;
  currentScoreUI:string;
  
  
  	constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.currentScoreUI;
      this.players = {
        p1: {
          name: '',
          currentScore: 501,
          currentScoreUI: '',
          scores: [],
          lastScore: '',
          dartsThrown: 0,
          average: 0
        },
        p2: {
          name: '',
          currentScore: 501,
          currentScoreUI: '',
          scores: [],
          lastScore: '',
          dartsThrown: 0,
          average: 0
        }
      }
  	}

  	ionViewDidLoad() {
      this.gameDetails = this.navParams.get('data')
      this.pageTitle = this.gameDetails.gameType.name;
      this.sets = this.gameDetails.sets.name;
      this.legs = this.gameDetails.legs.name;
      this.activePLayer = this.players.p1;
      
    }
    

  	enterNumber(number) {
  		this.currentScoreUI += number;
  		
  	}
  	enterScore() {
      this.activePLayer.currentScoreUI = this.currentScoreUI;
      if (this.activePLayer.name = 'p1') {
        this.activePLayer =  this.players.p2;
      } else {
        this.activePLayer = this.players.p1;
      }
      
  	}
}

so the components create two player objects, and then sets an activePlayer to one of them.
also is a function to update the user score and assing new activePlayer

template:

<ion-header ng-if="dataReady">
  <ion-navbar color="header-blue">
    <ion-title>
      {{activePLayer.name}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content color="primary" class="page-game">
	<div class="page-game__main-wrapper">
		<div class="page-game__names">names</div>
		<div class="page-game__stats">
			<div class="page-game__stats-sets-legs-wrapper">
				<span class="page-game__stats-sets-set">Sets : {{sets}}</span>
				<span class="page-game__stats-sets-leg">Legs : {{legs}}</span>
			</div>
			<div class="page-game__stats-sets-legs-wrapper">
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Last Score</span>
					<span class="page-game__stats-value">{{activePLayer.lastScore}}</span>
				</div>
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Darts thrown</span>
					<span class="page-game__stats-value">{{activePLayerdartsThrown}}</span>
				</div>
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Average</span>
					<span class="page-game__stats-value">{{activePLayer.average}}</span>
				</div>
			</div>
		</div>
		<div class="page-game__scores">
			<span class="page-game__scores-title">Current Score</span>
			<span class="page-game__scores-score">{{currentScoreUI}}</span>
			<span class="page-game__scores-checkout">Checkout</span>
			<span class="page-game__scores-checkout-value">T20 D16</span>
		</div>
		<div class="page-game__numbers">
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(1)">1</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(2)">2</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(3)">3</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(4)">4</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(5)">5</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(6)">6</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(7)">7</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(8)">8</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(9)">9</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number">
					<ion-icon name="close-circle"
						class="page-game__numbers-icon"></ion-icon>
				</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(0)">0</span>
				<span class="page-game__numbers-row-number" (click)="enterScore()">
					<ion-icon name="checkmark-circle"
						 class="page-game__numbers-icon"></ion-icon>
				</span>
			</div>
		</div>
	</div>
</ion-content>

and here the template shows one player at a time, and after a user hits enterScore(), his score is changed, and the other user is set as active in the controller.

my problem is doing this with typescript, and i feel like im not understanding assignment/declaration correctly. but when i try this in a few things happen…

i print {{activePlayer}} and i get [object object]
i print {{activePlayer.name}} nothing rendered

I know i have the object set to ‘any’, and this part i am confused about, in terms of objects, as online i seen many ways, and not sure which is ‘correct’.

hope this helps you to help me ha

4

You should avoid doing that, but not for reasons that have anything to do with your question. Giving players an interface like:

interface Player {
  name: string;
  currentScore?: number;
  currentScoreUI?: string;
  scores: number[];
  lastScore?: number;
  dartsThrown: number;
  average: number;
}

…will help your code be more readable and maintainable, and also let your IDE and build tools help you catch stupid bugs and use autocomplete to be more productive.

On to the problem, which really did need the sample code you provided to be diagnosed:

Always assign reasonable default or dummy values to all controller properties that are referenced from templates. The best place to do this is inline at declaration time, and if that’s not possible, then in the constructor.

ionViewDidLoad is too late for this, which is why you are (or at least should be) seeing “cannot read property ‘name’ of undefined” errors and not getting your player name displayed. Try assigning something reasonable to activePLayer (and fix that bizarre capITaLIZatION) in the constructor, and {{activePlayer.name}} should behave as you would expect.

5

Hey rapropos

Thanks for the help, very much appreciated.

I played around a bit and did some reading, and Im understanding more about ‘reference from template’. coming from only angular and js I was confused about assignment, but getting clearer.

I am going to have to look more into interfaces, but if possible when i implement an interface, and tidy up the code, could i paste it here for you see, and possibly point out anything else i’ve wrong? Starting off i dont want to be following bad examples, and seen loads of hacks online for similar issues to mine.

and sorry i rushed the code for demo so ill fix the camel-casing ha

Either way thanks for the help again :slight_smile: