How to bind nested JSON objects in to a <ion-item> using ngfor

Question

Iam trying to bind the Firstbatting object but the value is not showing:

i want to access like this {{item.Firstbatting.Name}}, do you have any idea how to do this?

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PCAService } from '../../providers/pca-service';

@Component({
  selector: 'page-score-card',
  templateUrl: 'score-card-input.html',
  providers: [PCAService]
})
export class ScoreCardInputPage {

  selectedItem: any;
  public resultYear: any;
  public resultDate: any;
  public resultScoreCard: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private pcaService: PCAService) {
  this.selectedItem = navParams.get('item');
  this.GetMatchPlayedYears();
  }

    GetMatchPlayedYears(){
        console.log('Service Call from GetMatchPlayedYears() up coming ts');
        this.pcaService.GetMatchPlayedYears()
        .then(data => {
        this.resultYear = data;
      });
    }

    GetMatchDatesByYear(strYear){
      //NavController.name.disabled = false;
      this.selectedItem = strYear;
      console.log('Service Call from GetMatchDatesByYear(strYear) up coming ts');
      this.pcaService.GetMatchDatesByYear(strYear)
      .then(datedata => {
      this.resultDate = datedata;
    });
   }

    GetScorecard(MatchOID){
      this.selectedItem = MatchOID;
      console.log('Service Call from GetMatchDatesByYear(strYear) up coming ts');
      this.pcaService.GetScorecard(MatchOID)
      .then(scorecard => {
      this.resultScoreCard = scorecard;
    });
   }
}

<ion-header>
  <ion-navbar color="danger">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title><h5>Score Card</h5></ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
  <ion-item>
    <ion-label>Year</ion-label>
    <ion-select [(ngModel)]="Year" (ngModelChange)="GetMatchDatesByYear($event)">
      <ion-option *ngFor="let item of resultYear; let i = index" value={{item.Year}}>{{item.Year}}</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Date</ion-label>
    <ion-select  [(ngModel)]="Date" (ngModelChange)="GetScorecard($event)">
      <ion-option *ngFor="let item of resultDate; let i = index" value={{item.MatchOID}}>{{item.Date}}</ion-option>     
    </ion-select>
  </ion-item>
</ion-list>

<ion-list>
  <ion-item *ngFor="let item of resultScoreCard.FirstBatting;">
       <p><b>{{item.Name}}</b> </p>        
  </ion-item>
</ion-list>

<ion-list visible=false>
    <ion-item-divider >
      First Batting
    </ion-item-divider>
      <ion-item  *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
          <p><b>{{item.Name}}</b></p>
      </ion-item>
</ion-list>
</ion-content>

Below is my sample Json object, this object represents the cricket score card and i want to bind this object in score card format like Cricinfo.com

http://www.espncricinfo.com/big-bash-league-2016-17/engine/match/1023585.html

{
   "FirstBatting": [
      {
         "Balls": 1,
         "BowledBy": "Sathish Kumar Lingam",
         "BowledByOID": 0,
         "Duration": 0,
         "Fours": 0,
         "Name": "Vijayakumar Suryanarayanan",
         "OID": 600000000027,
         "OutBy": "",
         "OutByOID": 0,
         "Runs": 0,
         "Sixes": 0,
         "StrikeRate": 0,
         "wktDetails": "Bowled"
      },
      {
         "Balls": 25,
         "BowledBy": "Sriram Venkatraman",
         "BowledByOID": 600000000000,
         "Duration": 0,
         "Fours": 0,
         "Name": "Rajesh Vinayagam",
         "OID": 600000000013,
         "OutBy": "Amalan Nagarajan",
         "OutByOID": 600000000000,
         "Runs": 21,
         "Sixes": 0,
         "StrikeRate": 0,
         "wktDetails": "Caught"
      }
   ],
   "FirstBattingDetailsBallByBall": [],
   "FirstBowling": [],
   "FirstBowlingDetailsOverbyOver": [],
   "FirstInningsSummary": {},
   "MatchSummary": {},
   "SecondBatting": [],
   "SecondBattingDetailsBallByBall": [],
   "SecondBowlinDetailsgOverbyOver": [],
   "SecondBowling": [],
   "SecondInningsSummary": {}
}

Suraj Rao · Accepted Answer · 2016-12-24 06:40:27Z

1

Your scorecard is an object and scorecard.FirstBatting is the array,

<ion-list *ngIf="resultScoreCard">
  <ion-item *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
       <p><b>Match Palyed: {{item.Name}}</b> </p>        
  </ion-item>
</ion-list>

edited Dec 24, 2016 at 6:40

answered Dec 22, 2016 at 11:49

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jayaprakash Venugopal Over a year ago

Iam not able to access scorecard.FirstBatting array, iam getting below error: C:\My_Artifacts\My_Codes\R&D\IONIC\IOINC2\PCA\node_modules\@angular\core\src\error_handler.js:48 EXCEPTION: Error in ./ScoreCardInputPage class ScoreCardInputPage - inline template:46:17 caused by: Cannot read property 'FirstBatting' of undefined

Suraj Rao Over a year ago

can you put the component class in the question? you are not receiving scorecard object

Jayaprakash Venugopal Over a year ago

Yes, iam calling this on demand so initial load object will will not be exist, i have added the html and ts file

Suraj Rao Over a year ago

just add the if condition .. it will show when object is present

Jayaprakash Venugopal · Accepted Answer · 2016-12-24 07:00:50Z

1

Thanks a lot Suraj, its works fine :)

<ion-list *ngIf="resultScoreCard" >
      <ion-item-divider >First Batting  </ion-item-divider>
      <ion-item *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
          <p><b>{{item.ShortName}}</b></p>
      </ion-item>
</ion-list>

answered Dec 24, 2016 at 7:00

Jayaprakash Venugopal

214 bronze badges

Collectives™ on Stack Overflow

How to bind nested JSON objects in to a <ion-item> using ngfor

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related