CODEWITHSUNDEEP
htmlarraysjsonionic-framework
Lbook
Lbook

Reputation: 29

display json that is in a array

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

object object, object object error

json values

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)
 }

}

Upvotes: 0

Views: 122

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

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

Upvotes: 1

Related Questions