How to show repeatable metabox value in my app

Ionic Framework ionic-v3
1

Developing an ionic app with WordPress back-end, can any one help me out how to show metabox value in my app, below is JSON response. It’s a repeatable metabox fields.


_meta_child_details	
0	
child_name	"Mayank"
_meta_child_hobby	"Cricket"
child_dob	"10/23/2017"
1	
child_name	"Dev"
_meta_child_hobby	"Hockey"
child_dob	"11/20/2017"
2

WOW after 4 hrs I get not get any reply

3

Maybe you should provide a little bit more information.
You are getting it with PHP API?
How is the incoming data?

And go on…

4

Thank you for your @wthijmen no it’s WordPress rest API, I want to show metabox values in app here is my HTML

 <div *ngIf="selectedDocItem">
<p> Name: {{selectedDocItem._meta_child_details[0]}} </p>
</div>

My TS file

export class DoctorDetailsPage {

	selectedDocItem: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
   // If we navigated to this page, we will have an item available as a nav param
    this.selectedDocItem = navParams.get('item');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DoctorDetailsPage');
  }

}

Where I am wrong ?

5

What code is before this page?
Can you provide that?

Try check your out put in this page by checking your Google Chrome Console / Firebug from Firefox with the following:

constructor(public navCtrl: NavController, public navParams: NavParams) {
  
   // If we navigated to this page, we will have an item available as a nav param
    this.selectedDocItem = navParams.get('item');
    console.log(this.selectedDocItem);
  }
6

code is before this page?

Doctor Page TS

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

import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

import { DoctorDetailsPage } from '../doctor-details/doctor-details';

@Component({
  selector: 'page-docotors',
  templateUrl: 'docotors.html',
})

export class DocotorsPage {

	doctor: string="Dr."; 
	private url: string = 'http://mydomain.com/med/wp-json/wp/v2/doctor-list?filter[per_page]=-1&filter[orderby]=date&order=desc&_embed';
	items: any;


  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DocotorsPage');
  }
  
    ionViewDidEnter() {

	this.http.get( this.url )
	    .map(res => res.json())
	    .subscribe(data => {
	      // we've got back the raw data, now generate the core schedule data
	      // and save the data for later reference
	      this.items = data;
	    });
	}
	
	//Go to Doctor Details Page
	itemTapped(event, item) {

		this.navCtrl.push(DoctorDetailsPage, {
		item: item
		});
	}	

}

HTML Page

<ion-header>
  <ion-navbar>
      <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Docotors</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
    <h2>{{doctor}} {{item.title.rendered}}</h2>
    </button>
  </ion-list>
</ion-content>

After click on doctor page will go to Doctor Details page and then below response will show


_meta_child_details	
0	
child_name	"Mayank"
_meta_child_hobby	"Cricket"
child_dob	"10/23/2017"
1	
child_name	"Dev"
_meta_child_hobby	"Hockey"
child_dob	"11/20/2017"
7

Firefox Response payload

“_meta_child_details”:[{“child_name”:“Mayank”,"_meta_child_hobby":“Cricket”,“child_dob”:“10/23/2017”},{“child_name”:“Dev”,"_meta_child_hobby":“Hockey”,“child_dob”:“11/20/2017”}],`

8

Your problem might be that your JSON is invalid.
You got [{}]. So it’s basically an object inside an array.

Try to get it as an [Object object] and it will work better.
Im handling all my incoming and outgoing data as Object and NOT as an array.

9

Yes agree with you, its an object inside an array. can you please tell me how to display those objects in details page.