Image not displaying while displaying contacts

co.find(["displayName", "phoneNumbers","photos"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {
    for (var i=0 ; i < contacts.length; i++){
     if(contacts[i].displayName !== null){
       var obj = {};
       obj["name"] = contacts[i].displayName;
       obj["number"] = contacts[i].phoneNumbers[0].value;
       obj["image"]= contacts[i].photos[0].value;
      // console.log(contacts[i].photos);
        this.contacts.push(obj)   
            console.log( "Image url="+ contacts[i].photos[0].value);
        }    
         console.log(contacts);
       // console.log(obj);  
    }
    this.groupContacts(this.contacts);
  })

html–

<ion-item-group *ngFor=“let group of groupedContacts”>
{{group.letter}}

    <ion-item-sliding *ngFor="let contact of group.contacts" class="contactlist">
   <ion-item>
     <ion-avatar item-start>  
     <img src="{{contact.image}}">
</ion-avatar>
   {{contact.name}}
         <p>{{contact.number}}</p>
       </ion-item>
         <ion-item-options side="right">
<button ion-button color="secondary" *ngIf="contact.phoneNumbers"
    (click)="callContact(contact.phoneNumbers[0].value)">
  <ion-icon name="call"> Call</ion-icon>
</button>
SMS

no condition around the tag.
what condition should i add here

Avoid to share contact list real numbers. thanks

2 Likes

You need to put condition inside the loop itself as it seems you don’t have photos set in the contacts. Check there if photos is not null then only do this obj["image"]= contacts[i].photos[0].value

is this the right way

co.find(["displayName", "phoneNumbers","photos"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {
    for (var i=0 ; i < contacts.length; i++){
     **if((contacts[i].displayName !== null)||(contacts[i].photos[0].value!=null)){**
       var obj = {};
       obj["name"] = contacts[i].displayName;
       obj["number"] = contacts[i].phoneNumbers[0].value;
       obj["image"]= contacts[i].photos[0].value;
      // console.log(contacts[i].photos);
        this.contacts.push(obj)   
            console.log( "Image url="+ contacts[i].photos[0].value);
        }    
         console.log(contacts);
       // console.log(obj);  
    }
    this.groupContacts(this.contacts);
  })

Try this:

f((contacts[i].displayName !== null) && (contacts[i].photos !== null))

PS: Check what I’ve said earlier again and try these things, I’ll be back later.

still the same output…

My bad! Probably we need to check the current contact whether the photos object in it (which would be there in any case as it is the structure) has any element at all or not. Like this:

if((contacts[i].displayName !== null) && (contacts[i].photos[0] !== null))

Let me know what is the output you get.

EDIT:

Sorry in a hurry so again did something wrong, it should be:

if((contacts[i].displayName !== null) && (contacts[i].photos.length > 0))

As we are moving in circles here, I decided to quickly build this myself:
https://github.com/janpio/ionic-native-contacts/

We start with a blank Ionic project:
https://github.com/janpio/ionic-native-contacts/commits/start

First we add Ionic Native contacts and do a simple console.log on all the contacts we get back:
https://github.com/janpio/ionic-native-contacts/commits/log
https://github.com/janpio/ionic-native-contacts/commit/1a69566e35103672e9d98a1958e7652faae55be6#diff-cee9e659d51e33fd1c3c22b4d9da7bd2R19

Now we know the structure of contacts and know contacts have a photos key that can be either null or an list of objects:

image

With that knowledge we can output all contacts that DO have a picture:
https://github.com/janpio/ionic-native-contacts/commits/contactList
https://github.com/janpio/ionic-native-contacts/commit/903007e3af8e4d27815663f394bcb62950dc0634

That shows us what you got all the time:

In the console we get this:


but also this:

That URL gives us the code we need to implement to fix this: https://angular.io/guide/security#bypass-security-apis

Implemented this changes our code to this:
https://github.com/janpio/ionic-native-contacts/commit/272b78b2a47e9391e2d4f5f373830566d3f0beb3

Success - our contact list now shows our contacts that have photos and the images actually load!

And now that we know it works, we can also add all the other contacts to our list and give them a default image to make it more useful:
https://github.com/janpio/ionic-native-contacts/commit/160ddf9f2b1f305c77db7ce45bb80eb8ab004837

And with that my contact list output looks like this:

Done.

2 Likes

Try to learn from what @Sujan12 has posted, take this whole exercise as a learning experience.

For your purposes though, we just need to check both photos being not null and photos being not empty as follows:

if((contacts[i].displayName !== null) && (contact.photos!==null && contacts[i].photos.length > 0))

This is because it seems that if there is no photo set for the contact then the photos can be null and it can possibly be an empty array too, if at all not null.

Also, do not post personal data as @sonuyadav said.

2 Likes

Thanks a lot for your time …the issue has been resolved…and it was really a great learning by doing…

2 Likes

Please feel free to ask any questions about my code. You almost had it, but didn’t look at the data structures and so had no way to really solve it.

1 Like

A post was split to a new topic: Grouping entries in list by first letter

Hi @Sujan12 . I used your github code to display contact list. But unfortunately I am getting the error. Instead of the images. This is the code:

.ts file:

.

.html file:

Screenshot_4 .

And I am facing this error while getting images:

And it displays only names and numbers.

Please help me?

That code is a few years old, so not surprising that it doesn’t work any more. Did you follow the link from the error message and understand it and follow what the solution for it is?

Hi @Sujan12 . Thanks for replying. I just solved it with an another way. I used ( WebView ) plugin for it. Which can be found here ( https://ionicframework.com/docs/native/ionic-webview ). And my code was look like this:

 constructor(private contacts: Contacts, private sanitizer: DomSanitizer, private router: Router, private callNumber: CallNumber, private contact: Contact, private webView: WebView) {
    // TODO
  }

 getContacts(): void {
    this.contacts.find(
        ['displayName', 'phoneNumbers', 'photos'],
        {multiple: true, hasPhoneNumber: true}
    ).then((contacts) => {
      for (let i = 0 ; i < contacts.length; i++) {
        if(contacts[i].displayName !== null) {
          const contact = {};
          contact['name']   = contacts[i].displayName;
          contact['number'] = contacts[i].phoneNumbers[0].value;
          if (contacts[i].photos != null && contacts[i].photos.length > 0) {
            console.log(contacts[i].photos[0].value);
            contact['image'] = this.webView.convertFileSrc(contacts[i].photos[0].value);
            console.log(contact['image']);
          } else {
            contact['image'] = 'assets/dummy-profile-pic.png';
          }
          this.contactList.push(contact);
        }
      }
    });
  }

This is the working code for me. You can update it in the github.

Can you help in saving contact with image?