Question about getting specified value from JSON

Ionic Framework ionic-v3
1

I have my JSON file like this

{
results: [
{
gender: "female",
name: {
title: "mrs",
first: "یاسمن",
last: "صدر"
},
location: {
street: "7210 جمهوری اسلامی",
city: "سنندج",
state: "آذربایجان شرقی",
postcode: 17775
},
email: "یاسمن.صدر@example.com",
login: {
username: "smallswan925",
password: "deputy",
salt: "1a7qeHhw",
md5: "cc5c7636837e3c30d9eff75d87c4a2c3",
sha1: "db4c4adffa45ae6d8458291117dcbf1c4194e65f",
sha256: "77897c1af06ce545f531c11257613d797870645c6ef97ff4daea5f5acdea8c16"
},
dob: "1973-05-23 08:39:47",
registered: "2009-12-06 14:26:39",
phone: "074-81773603",
cell: "0955-795-7819",
id: {
name: "",
value: null
},
picture: {
large: "https://randomuser.me/api/portraits/women/34.jpg",
medium: "https://randomuser.me/api/portraits/med/women/34.jpg",
thumbnail: "https://randomuser.me/api/portraits/thumb/women/34.jpg"
},
nat: "IR"
},
{
gender: "male",
name: {
title: "mr",
first: "jonas",
last: "roger"
},
location: {
street: "6602 place de l'église",
city: "poitiers",
state: "puy-de-dôme",
postcode: 41062
},
email: "jonas.roger@example.com",
login: {
username: "purplefrog355",
password: "tree",
salt: "3XkLGhNI",
md5: "ad9c73642a4928b25235ef19d30f1aa6",
sha1: "4f7972aa8edcb671efdf3acfc6a9c4df0e389c89",
sha256: "2f20a739cee149bc32bd7a353bb450d2d3945955353e231e4d363974d6ebc50d"
},
dob: "1960-01-29 06:18:49",
registered: "2005-09-04 04:00:58",
phone: "05-30-49-75-95",
cell: "06-67-53-81-66",
id: {
name: "INSEE",
value: "160078570904 70"
},
picture: {
large: "https://randomuser.me/api/portraits/men/55.jpg",
medium: "https://randomuser.me/api/portraits/med/men/55.jpg",
thumbnail: "https://randomuser.me/api/portraits/thumb/men/55.jpg"
},
nat: "FR"
},
{
gender: "female",
name: {
title: "ms",
first: "özsu",
last: "öztürk"
},
location: {
street: "5649 bağdat cd",
city: "yalova",
state: "gaziantep",
postcode: 50527
},
email: "özsu.öztürk@example.com",
login: {
username: "blackfrog644",
password: "enjoy",
salt: "TVeev2ro",
md5: "a1ba8138881554a8b4942aaa21d0b749",
sha1: "92d9b1382824e12549163878a56dad06583a424f",
sha256: "c2cdf22bb28d970cd53ca01f84d98b058542469a495f02ea31bc828ba860107f"
},
dob: "1956-04-27 17:40:53",
registered: "2011-05-26 07:52:07",
phone: "(543)-496-5784",
cell: "(134)-919-2018",
id: {
name: "",
value: null
},
picture: {
large: "https://randomuser.me/api/portraits/women/11.jpg",
medium: "https://randomuser.me/api/portraits/med/women/11.jpg",
thumbnail: "https://randomuser.me/api/portraits/thumb/women/11.jpg"
},
nat: "TR"
}
],
info: {
seed: "dfb6ec4988dbe5c3",
results: 3,
page: 1,
version: "1.1"
}
}

my home.ts like this:roll_eyes:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})
export class HomePage {
	public people: any = [];

	constructor(public navCtrl: NavController, public http: Http) {
		this.getItem();
	}

	getItem() {
		this.http.get('https://randomuser.me/api/?results=3')
			.map(res => res.json())
			.subscribe(
				data => {
					this.people = data.results;

				},
				err => {
					alert(err);
				}
			)
	}

}

How can i get only specified person of this JSON (like name, gender, email of only the first person)

i tried like this in my home. html

<ion-header>
	<ion-navbar>
		<ion-title>
			Ionic Blank
		</ion-title>
	</ion-navbar>
</ion-header>

<ion-content>
	<ion-list>


			<h2 >{{people[0].gender}}</h2>

	</ion-list>
</ion-content>

it turned out error "Cannot read property ‘0’ of defined "

2

Console log this.people in your constructor and ionViewWillEnter. If it is ubdefined or null you know you need to instantiate with value if you want reference to the first value in the array in the template

That is where I believe the issue is

3

And if you want do an ngIf test on peoples.length>0

4

TYSM for your reply, i now figured out how to do so

all i did was, based on my code above, changing
<h2 >{{people[0].gender}}</h2>

to

<h2 >{{ people[0]?.gender }}</h2> in order to print the gender value of the 1st guy