Ionic display image from json url

Question

I am trying to display an image from a json on an ionic card. I get the JSON response in the console log but can't get the image to show up. so I end up having a blank card. I am obviously messing something up in the html. Any help would be great thank you! below is a screenshot of the empty card.

Home.Html

   <ion-card>
  <ion-card-content>
    <ion-item *ngFor="let attribute of attributes">
      <img data-src='{{attribute.pic_url}}' />
      <ion-card-title>
        {{attributes.description}}
      </ion-card-title>
    </ion-item>
  </ion-card-content>
</ion-card>

home.ts

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
 })
  export class HomePage {

 private storymap : FormGroup;
 private title: string;
 private author: string;
 private link: string;
 private inputName='';
 private result: any;
 private data: Observable<any>;
 private appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
 private subtitle: string;
 private attributes: string[];
 private geometry:  any[] = [];
 private photo: string[];

constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder) {
this.storymap = this.formBuilder.group({
   storymapurl: [''],
   title:  ['', Validators.required],
   author: [''],
   description: [''],
});
}

logForm(){
   if ( this.inputName.length > 3 ) {

  this.appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
  console.log(this.appid);
  fetch(`https://www.arcgis.com/sharing/rest/content/items/${this.appid}/data?f=json`)
    .then(response => response.json())
    .then(metadata => {
            this.title = metadata["values"]["title"]
            //console.log(this.title)
            this.subtitle = metadata["values"]["subtitle"]
            this.author = metadata["values"]["author"]
            //console.log(this.subtitle)
            return fetch(`https://www.arcgis.com/sharing/rest/content/items/${metadata["values"]["webmap"]}/data?f=json`)
            })        
    .then(response => response.json())
    .then(data => {
      let data_res = Array.of(data);
      this.attributes = Object.keys(data_res["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["attributes"]);
      console.log(this.attributes.pic_url);
              this.geometry = Object.keys(data["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["geometry"])
            //this.photo = Object.keys(data["operationalLayers"]["0"]["featureCollection"]["layers"]["0"]["featureSet"]["features"]["0"]["attributes"]["pic_url"])
            //console.log(this.photo)
              console.log(data)

            return this.attributes
            });
}



console.log(this.storymap.value)

} }

what console.log(attribute.pic_url); says ? most likely its empty. — Whatatimetobealive
– Whatatimetobealive, Commented Jan 24, 2019 at 21:44
what is the result console.log(this.attributes) ? if you post the array here will be better not the screen shot. — Whatatimetobealive
– Whatatimetobealive, Commented Jan 24, 2019 at 22:19
' (7) ["name", "description", "icon_color", "pic_url", "thumb_url", "is_video", "OBJECTID"] 0: "name" 1: "description" 2: "icon_color" 3: "pic_url" 4: "thumb_url" 5: "is_video" 6: "__OBJECTID" length: 7 __proto: Array(0)' — Lbook
– Lbook, Commented Jan 24, 2019 at 22:22

Whatatimetobealive · Accepted Answer · 2019-01-25 23:30:05Z

1

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>
       <button item-right ion-button (click) = "logForm()">Get Data</button>
 </ion-item>
 <ion-item>
   <ion-label>Storymap Title:</ion-label>
   <ion-input type="text" formControlName="title" [(ngModel)] ="title"></ion-input>
 </ion-item>
 <ion-item>
    <ion-label>Author:</ion-label>
    <ion-input type="text" formControlName="author" [(ngModel)] ="author"></ion-input>
 </ion-item>
 <ion-item>
   <ion-label>Description:</ion-label>
   <ion-textarea type="text" formControlName="description" [(ngModel)] ="subtitle" ></ion-textarea>
 </ion-item>
  <ion-item>
   <button ion-button [disabled]="geometry.length > 0">True</button>
   <ion-card>
      <ion-card-content>
        <ion-item>
          <ion-card-title>
            {{attributes.description}}
          </ion-card-title>
        </ion-item>
      </ion-card-content>
      <img [src]='attributes.pic_url' />

    </ion-card>
  </ion-item>
 <button ion-button type="submit" [disabled]="!storymap.valid">Submit</button>
</form>
</ion-content>

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';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private storymap : FormGroup;
  private title: string;
  private author: string;
  private link: string;
  private inputName='';
  private data: Observable<any>;
  private appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
  private subtitle: string;
  private attributes= {
    name:'',
    icon_color:'',
    is_video:'',
    description:'',
    pic_url:'',
    thumb_url:''
  }
  private geometry:  any[] = [];
  private photo: string[];

  constructor(public navCtrl: NavController, public http:HttpClient, private formBuilder: FormBuilder) {
    this.storymap = this.formBuilder.group({
       storymapurl: [''],
       title:  ['', Validators.required],
       author: [''],
       description: [''],
    });
  }

  logForm(){
    if ( this.inputName.length > 3 ) {

      this.appid = this.inputName.substring(this.inputName.indexOf("appid=")+6,this.inputName.length);
      console.log(this.appid);

    fetch(`https://www.arcgis.com/sharing/rest/content/items/${this.appid}/data?f=json`)

      .then(res => res.json())
.then(json => {
  console.log('val',json); // No Author in the array 
  this.title =json.values.title;
  this.author=json.values.author;
  this.subtitle = json.values.subtitle;
  fetch(`https://www.arcgis.com/sharing/rest/content/items/${json.values.webmap}/data?f=json`).then(res => res.json()
  ).then(json =>{
      //description value also null in the result you cant display
    this.attributes.description =json.operationalLayers[0].featureCollection.layers[0].featureSet.features[0].attributes.description;

    this.attributes.pic_url=json.operationalLayers[0].featureCollection.layers[0].featureSet.features[0].attributes.pic_url;

  })
})};
}
}

Here is the stackblitz so you can get the idea.

edited Jan 25, 2019 at 23:30

answered Jan 24, 2019 at 22:29

Whatatimetobealive

1,35310 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lbook Over a year ago

so that helps but now I get an error. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Whatatimetobealive Over a year ago

you need to convert data to json something like data.json(); let me edit my answer based on that

Lbook Over a year ago

it doesn't like the .0. part @Whatatimetobealive

Lbook Over a year ago

yeah. sorry now I get a Error: Uncaught (in promise): TypeError: data is not a function TypeError: data is not a function on that let data_res= data.json

Lbook Over a year ago

so I tried that and get an error ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined. so then I changed it back to with the ["0"] and I still get the same error @whatatimetobealive

|

Aniruddh Thakor · Accepted Answer · 2019-01-25 04:43:17Z

0

Try this src code.

 <ion-card>
    <ion-card-content>
      <ion-item *ngFor="let attribute of attributes">
        <img ng-src='{{attribute.pic_url}}' />
        <ion-card-title>
          {{attributes.description}}
        </ion-card-title>
      </ion-item>
    </ion-card-content>
  </ion-card>

answered Jan 25, 2019 at 4:43

Aniruddh Thakor

1,6462 gold badges12 silver badges19 bronze badges

Collectives™ on Stack Overflow

Ionic display image from json url

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related