display json that is in a array - html

Question

looking to display title values from json file. but in the HTML it can only dig down to an array and displays object: object. I'm looking to find the title which is located under sections.0.foreground.title. do I need to add something to my home.ts or can it all be in the HTML? thanks
cannot read property'0" of undefined
new html error
Home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="storymap" (ngSubmit)="logForm()">
<ion-item>
<ion-label color="primary">URL</ion-label>
<ion-input type="text" placeholder="Storymap URL" formControlName="storymapurl" [(ngModel)]="inputName"></ion-input>
</ion-item>
<ion-item> *ngFor="let item of result.values.sections">
<button ion-button (click) = "getData()">Get Data</button>
<ion-row>Title:{{item.foreground.title}}</ion-row>
</ion-item>
<ion-item>
<ion-label>storymap</ion-label>
<ion-input type="text" formControlName="title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea formControlName="description"></ion-textarea>
</ion-item>
<button ion-button type="submit" [disabled]="!storymap.valid">Submit</button>
</form>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '#angular/forms';
import {HttpClient,HttpHeaders} from '#angular/common/http'
import { Observable } from 'rxjs/Observable';
import $ from 'jquery'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private storymap : FormGroup;
result:any= [];
data: Observable<any>;
public inputName: string;
constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder) {
this.storymap = this.formBuilder.group({
storymapurl: [''],
title: ['', Validators.required],
description: [''],
});
}
getData(){
this.inputName;
console.log('here', this.inputName)
this.data = this.http.get(this.inputName);
this.data.subscribe(data => {
this.result = data;
// console.log(data)
this.title = data.sections[0].foreground.title
console.log(this.title)
});
}
logForm(){
console.log(this.storymap.value)
}
}

Answer 1

So after our convo I think I understood your use case:
* user clicks Button getData()
* users sees data's title for the first item in sections?
Then you need to do:
<form [formGroup]="storymap" (ngSubmit)="logForm()">
<ion-item>
<ion-label color="primary">URL</ion-label>
<ion-input type="text" placeholder="Storymap URL" formControlName="storymapurl" [(ngModel)]="inputName"></ion-input>
</ion-item>
<ion-item>
<button ion-button (click) = "getData()">Get Data</button>
<ion-row>Title:{{title}}</ion-row>
</ion-item>
<ion-item>
<ion-label>storymap</ion-label>
<ion-input type="text" formControlName="title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea formControlName="description"></ion-textarea>
</ion-item>
<button ion-button type="submit" [disabled]="!storymap.valid">Submit</button>
</form>
And in your ts file:
export class HomePage {
private storymap : FormGroup;
private title: string;
private inputName: string = "https://www.arcgis.com/sharing/rest/content/items/b9ec967ce39a49cd8de6fd24aa14d477/data?f=json"
private result: any;
constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder) {
this.storymap = this.formBuilder.group({
storymapurl: [''],
title: ['', Validators.required],
description: [''],
});
}
getData(){
this.http.get(this.inputName).subscribe(data => {
this.result = data;
this.title = this.result.values.sections[0].foreground.title;
console.log(this.result.values.sections[0].foreground.title)
});
}
If this still produces error - please console log what you get in response above.
Here is working blitz:
https://stackblitz.com/edit/ionic-yuvxgm