37144

how to call object value ionic 2

Question:

After done the api calling. In my db I have set of json object values. The structure is look like this :

{ "status": 1, "message": "List Successfully fetched", "CatgeoryList": [ { "CatID": "10" }, { "CatID": "30" }, { "CatID": "0" }] }

I have done api calling. And i get the status == 1. And i can print all the object values under in CatgeoryList. But i want to print all the catID UNDER IN CatgeoryList. i was not able to get.

here my code :

this.authService.categ(this.loginData).then((result) => { this.loading.dismiss(); this.data = result; if(this.data.status == 1) { this.Catdata = this.data.CatgeoryList; console.log(this.Catdata); // i am getting all data this.Catdatanames = this.Catdata.CatID; // not working console.log(this.Catdata.CatID); // not working } }

I want to get the catID underCatgeoryList.

<strong>Update :</strong>

Update of <strong>home.html:</strong>

<div class="item item-body no-padding" style="border-width: 0px !important;"> <div class="row no-padding" *ngFor="let data of Catdata;let i = index" (click)="opndetailpage()"> <ng-container *ngIf=" i % 2 === 0"> <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;"> <div class="custom-design1"><span class="grid-title">{{Catdata[i].CategoryName}}</span></div> </div> <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;"> <div class="custom-design1"><span class="grid-title">{{Catdata[i+1].CategoryName}}</span></div> </div> </ng-container> </div> </div>

<strong>home.ts</strong>

constructor( public alertCtrl: AlertController, public app: App, public loadingCtrl: LoadingController, public modalCtrl: ModalController, public navCtrl: NavController, public toastCtrl: ToastController, public confData: ConferenceData, public user: UserData, public http:Http, public authService: AuthService ) { this.showLoader(); this.authService.categ(this.loginData).then((result) => { this.loading.dismiss(); this.data = result; if(this.data.status == 1) { this.Catdata = this.data.CatgeoryList; for(let i=0; i<this.Catdata.length; i++) { console.log(this.Catdata[i].CategoryName); } } else if(this.data.status == 0) { let alert = this.alertCtrl.create({ title: 'Error', subTitle: 'Please Enter Valid Username & Password', buttons: ['OK'] }); alert.present(); } }, (err) => { this.loading.dismiss(); }); }

My <strong>takeexam.html</strong>

<ion-buttons> <button (click)="canceltap()" style="font-size: 15px;text-transform: none;" ion-button>Cancel </button> </ion-buttons>

my takeexam.ts

canceltap() { // this.navCtrl.pop(); console.log("pop tap"); this.navCtrl.setRoot(TabsPage); .// this is my home page }

so when i press cancel button in takeexam.html its going to tabp[age.html ( home page). But in that no data are showing. I just tried with hard code some value in my home page. That time when i press cancel button its showing all data.

so i found the problem is in shoing the data in ionviewdidload or some other. i tried.ionViewDidEnter ionDidLoad. but nothing works

Answer1:

Since this.data.CatgeoryList is an array, you'll need to use a loop to do something with each item

this.authService.categ(this.loginData).then((result) => { this.loading.dismiss(); this.data = result; if(this.data.status == 1) { // this.Catdata is an array this.Catdata = this.data.CatgeoryList; // Use a loop to print the items for(let i=0; i<this.Catdata.length; i++) { console.log(this.Catdata[i].CatID); } } }

And if you want to show it in the view, you can use ngFor like this

<ion-list> <ion-item *ngFor="let item of Catdata"> {{ item.CatID }} </ion-item> </ion-list>

<strong>UPDATE</strong>

<blockquote>

But if i want to get the catID by onclikc. MEANS that i need to pass that catID to my another page means. Ionic 2 by (click) how can i pass this catID To next page

</blockquote>

Update the view

<ion-list> <ion-item (click)="showDetails(item.CatID)" *ngFor="let item of Catdata"> {{ item.CatID }} </ion-item> </ion-list>

You can add a new method on the component code

public showDetails(catId: any): void { this.navCtrl.push(AnotherPage, { catId: catId }); }

And in the second page, in the constructor, get the data by using <a href="https://ionicframework.com/docs/api/navigation/NavParams/" rel="nofollow">NavParams</a>

constructor(public params: NavParams){ // userParams is an object we have in our nav-parameters this.catId = this.navParams.get('catId') }

Recommend

  • Angular Hide With Button
  • Importing angular component to be available in all modules
  • how to get selected value of radio in reactive form
  • How can we set the default value of radio button in angular 2
  • Compare a column between 2 csv files and write differences using Python
  • href inside href [duplicate]
  • Programatically open file in visual studio
  • Not able to display correct data in table -AngularJS
  • Want to understand iframe breakout code
  • Can't get plist URL in Swift
  • Pass array from parent template to child template
  • using html data-attributes as css-variable (i.e. text-shadow)
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How do I formally document a C# Attribute in UML?
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • How can I display the parent menu item's description using Wordpress walkers?
  • android.support.v7.widget.Toolbar VectorDrawableCompat IllegalStateException when using support lib
  • gspread or such: help me get cell coordinates (not value)
  • Eloquent update method change created_at timestamp
  • custom UITableViewCell with image for highlighting
  • How do I access an unhandled exception in an MVC Error view?
  • Google Custom Search with transparent background
  • Meteor helpers not available in Angular template
  • Android fill_parent issue
  • C++ Partial template specialization - design simplification
  • Change multiple background-images with jQuery
  • NHibernate Validation Localization with S#arp Architecture
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Align navbar back button on right side
  • Bug in WPF DataGrid
  • Sending data from AppleScript to FileMaker records
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Redux, normalised entities and lodash merge
  • align graphs with different xlab
  • AngularJs get employee from factory
  • How to set the response of a form post action to a iframe source?
  • how does django model after text[] in postgresql [duplicate]
  • Change div Background jquery