Issue with Json return object (Ionic) (Angularjs)

Question

I'm trying to iterate all json file and It works with the {{title}} and shows everything there is, But it does not work with the attachments url.

Json

LINK IMAGE JSON

html

  <ion-content>      
    <ion-card *ngFor="let user of users">
    <img [src]="user.attachments.url"> <!--It doesn't work-->
    <ion-card-content>
    <ion-card-title>
    {{ user.title }} <!--WORK-->
    </ion-card-title>
  </ion-content>

Provider

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


@Injectable()
export class UserService {
  data: any;

  constructor(private http: Http) {
    this.data = null;
  }

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
      this.http.get('file.json')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data.posts;
          resolve(this.data);
        });
    });


  }
      generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}
}

Answer 1

attachments is an array so you have to use it like that only, possible solution is,

<ion-content>      
<ion-card *ngFor="let user of users">
<img [src]="user.attachments[0].url"> <!--first attachment. It will give error for no attachments-->
<ion-card-content>
<ion-card-title>
{{ user.title }} <!--WORK-->
</ion-card-title>