Image not displaying while displaying contacts

Sujan12 · July 6, 2017, 3:45pm

No, that is one contact.

What do you get with console.log(contacts)?

vithika · July 6, 2017, 3:58pm

main.js:1445 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘0’ of null
TypeError: Cannot read property ‘0’ of null
at main.js:46272

can u tell me why this error…

on contacts[i].photos[0].value

Sujan12 · July 6, 2017, 4:04pm

When you are accessing contacts[i].photos[0].value. Where does it read 0? Of contacts[i].photos. But it says this is null. So contacts[i] has no photos value at all here.

vithika · July 6, 2017, 4:08pm

I am using contacts[i].photos…

but If i refer this example–

and try to apply it I am getting the above error Cannot read 0 of null…

vithika · July 6, 2017, 4:10pm

on console.log(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;
       console.log(contacts[i].photos);
        this.contacts.push(obj)   
             console.log(contacts[i].photos);
             console.log(contacts);

        }    
        console.log(obj);  
    }
    this.groupContacts(this.contacts);
  })

getting the following–

null
21:38:34.774 main.js:46272 null
21:38:34.774 main.js:46273 Array(224)
21:38:34.776 main.js:46275 Object
21:38:34.776 main.js:46270 null
21:38:34.776 main.js:46272 null
21:38:34.776 main.js:46273 Array(224)
21:38:34.778 main.js:46275 Object
21:38:34.779 main.js:46270 null
21:38:34.779 main.js:46272 null
21:38:34.779 main.js:46273 Array(224)
21:38:34.781 main.js:46275 Object
21:38:34.781 main.js:46270 Array(1)
21:38:34.782 main.js:46272 Array(1)
21:38:34.782 main.js:46273 Array(224)
21:38:34.784 main.js:46275 Object
21:38:34.784 main.js:46270 null
21:38:34.784 main.js:46272 null
21:38:34.784 main.js:46273 Array(224)
21:38:34.785 main.js:46275 Object
21:38:34.786 main.js:46270 null
21:38:34.786 main.js:46272 null
21:38:34.786 main.js:46273 Array(224)
21:38:34.787 main.js:46275 Object
21:38:34.788 main.js:46270 null
21:38:34.788 main.js:46272 null
21:38:34.788 main.js:46273 Array(224)
21:38:34.789 main.js:46275 Object
21:38:34.789 main.js:46270 null
21:38:34.789 main.js:46272 null
21:38:34.789 main.js:46273 Array(224)
21:38:34.790 main.js:46275 Object
21:38:34.791 main.js:46270 null
21:38:34.791 main.js:46272 null
21:38:34.791 main.js:46273 Array(224)
21:38:34.793 main.js:46275 Object
21:38:34.794 main.js:46270 null
21:38:34.794 main.js:46272 null
21:38:34.794 main.js:46273 Array(224)
21:38:34.796 main.js:46275 Object
21:38:34.797 main.js:46270 null
21:38:34.797 main.js:46272 null
21:38:34.797 main.js:46273 Array(224)
21:38:34.799 main.js:46275 Object
21:38:34.799 main.js:46270 null
21:38:34.799 main.js:46272 null
21:38:34.799 main.js:46273 Array(224)
21:38:34.800 main.js:46275 Object
21:38:34.801 main.js:46270 null
21:38:34.801 main.js:46272 null
21:38:34.801 main.js:46273 Array(224)
21:38:34.802 main.js:46275 Object
21:38:34.802 main.js:46270 Array(1)
21:38:34.802 main.js:46272 Array(1)
21:38:34.802 main.js:46273 Array(224)
21:38:34.804 main.js:46275 Object
21:38:34.804 main.js:46270 null
21:38:34.804 main.js:46272 null
21:38:34.804 main.js:46273 Array(224)
21:38:34.805 main.js:46275 Object
21:38:34.806 main.js:46270 null
21:38:34.806 main.js:46272 null
21:38:34.806 main.js:46273 Array(224)
21:38:34.807 main.js:46275 Object
21:38:34.807 main.js:46270 Array(1)
21:38:34.807 main.js:46272 Array(1)
21:38:34.807 main.js:46273 Array(224)
21:38:34.809 main.js:46275 Object
21:38:34.809 main.js:46270 null
21:38:34.809 main.js:46272 null
21:38:34.809 main.js:46273 Array(224)
21:38:34.810 main.js:46275 Object
21:38:34.811 main.js:46270 null
21:38:34.811 main.js:46272 null
21:38:34.812 main.js:46273 Array(224)
21:38:34.813 main.js:46275 Object
21:38:34.813 main.js:46270 null
21:38:34.814 main.js:46272 null
21:38:34.814 main.js:46273 Array(224)
21:38:34.815 main.js:46275 Object
21:38:34.815 main.js:46270 null
21:38:34.815 main.js:46272 null
21:38:34.816 main.js:46273 Array(224)
21:38:34.817 main.js:46275 Object
21:38:34.817 main.js:46270 null
21:38:34.817 main.js:46272 null
21:38:34.818 main.js:46273 Array(224)
21:38:34.819 main.js:46275 Object
21:38:34.819 main.js:46270 Array(1)
21:38:34.819 main.js:46272 Array(1)
21:38:34.819 main.js:46273 Array(224)
21:38:34.820 main.js:46275 Object
21:38:34.821 main.js:46270 null
21:38:34.821 main.js:46272 null
21:38:34.821 main.js:46273 Array(224)
21:38:34.822 main.js:46275 Object
21:38:34.822 main.js:46270 null
21:38:34.823 main.js:46272 null
21:38:34.823 main.js:46273 Array(224)
21:38:34.824 main.js:46275 Object
21:38:34.824 main.js:46270 Array(1)
21:38:34.825 main.js:46272 Array(1)
21:38:34.825 main.js:46273 Array(224)
21:38:34.826 main.js:46275 Object
21:38:34.827 main.js:46270 null
21:38:34.827 main.js:46272 null
21:38:34.827 main.js:46273 Array(224)
21:38:34.828 main.js:46275 Object
21:38:34.828 main.js:46270 null
21:38:34.829 main.js:46272 null
21:38:34.829 main.js:46273 Array(224)
21:38:34.830 main.js:46275 Object
21:38:34.830 main.js:46270 null
21:38:34.830 main.js:46272 null
21:38:34.830 main.js:46273 Array(224)
21:38:34.831 main.js:46275 Object
21:38:34.832 main.js:46270 Array(1)
21:38:34.832 main.js:46272 Array(1)
21:38:34.832 main.js:46273 Array(224)
21:38:34.833 main.js:46275 Object
21:38:34.834 main.js:46270 Array(1)
21:38:34.834 main.js:46272 Array(1)
21:38:34.834 main.js:46273 Array(224)
21:38:34.835 main.js:46275 Object
21:38:34.836 main.js:46270 null
21:38:34.836 main.js:46272 null
21:38:34.836 main.js:46273 Array(224)
21:38:34.837 main.js:46275 Object
21:38:34.837 main.js:46270 Array(1)
21:38:34.838 main.js:46272 Array(1)
21:38:34.838 main.js:46273 Array(224)
21:38:34.839 main.js:46275 Object
21:38:34.840 main.js:46270 null
21:38:34.840 main.js:46272 null
21:38:34.840 main.js:46273 Array(224)
21:38:34.841 main.js:46275 Object
21:38:34.842 main.js:46270 null
21:38:34.843 main.js:46272 null
21:38:34.843 main.js:46273 Array(224)
21:38:34.844 main.js:46275 Object
21:38:34.844 main.js:46270 null
21:38:34.844 main.js:46272 null
21:38:34.845 main.js:46273 Array(224)
21:38:34.846 main.js:46275 Object
21:38:34.846 main.js:46270 null
21:38:34.846 main.js:46272 null
21:38:34.846 main.js:46273 Array(224)
21:38:34.847 main.js:46275 Object
21:38:34.847 main.js:46270 null
21:38:34.848 main.js:46272 null
21:38:34.848 main.js:46273 Array(224)
21:38:34.849 main.js:46275 Object
21:38:34.849 main.js:46270 null
21:38:34.849 main.js:46272 null
21:38:34.849 main.js:46273 Array(224)
21:38:34.850 main.js:46275 Object
21:38:34.851 main.js:46270 null
21:38:34.851 main.js:46272 null
21:38:34.851 main.js:46273 Array(224)
21:38:34.852 main.js:46275 Object
21:38:34.852 main.js:46270 Array(1)
21:38:34.853 main.js:46272 Array(1)
21:38:34.853 main.js:46273 Array(224)
21:38:34.858 main.js:46275 Object
21:38:34.859 main.js:46270 null
21:38:34.859 main.js:46272 null
21:38:34.859 main.js:46273 Array(224)
21:38:34.860 main.js:46275 Object
21:38:34.861 main.js:46270 null
21:38:34.861 main.js:46272 null
21:38:34.861 main.js:46273 Array(224)
21:38:34.862 main.js:46275 Object
21:38:34.862 main.js:46270 null
21:38:34.862 main.js:46272 null
21:38:34.863 main.js:46273 Array(224)
21:38:34.864 main.js:46275 Object
21:38:34.864 main.js:46270 Array(1)
21:38:34.864 main.js:46272 Array(1)
21:38:34.864 main.js:46273 Array(224)
21:38:34.865 main.js:46275 Object
21:38:34.866 main.js:46270 Array(1)
21:38:34.866 main.js:46272 Array(1)
21:38:34.866 main.js:46273 Array(224)
21:38:34.867 main.js:46275 Object
21:38:34.867 main.js:46270 null
21:38:34.868 main.js:46272 null
21:38:34.868 main.js:46273 Array(224)
21:38:34.869 main.js:46275 Object
21:38:34.869 main.js:46270 null
21:38:34.869 main.js:46272 null
21:38:34.869 main.js:46273 Array(224)
21:38:34.870 main.js:46275 Object
21:38:34.870 main.js:46270 Array(1)
21:38:34.871 main.js:46272 Array(1)
21:38:34.871 main.js:46273 Array(224)
21:38:34.872 main.js:46275 Object
21:38:34.872 main.js:46270 null
21:38:34.873 main.js:46272 null
21:38:34.873 main.js:46273 Array(224)
21:38:34.874 main.js:46275 Object
21:38:34.874 main.js:46270 null
21:38:34.874 main.js:46272 null
21:38:34.875 main.js:46273 Array(224)
21:38:34.876 main.js:46275 Object
21:38:34.876 main.js:46270 null
21:38:34.876 main.js:46272 null
21:38:34.876 main.js:46273 Array(224)
21:38:34.877 main.js:46275 Object
21:38:34.878 main.js:46270 Array(1)
21:38:34.878 main.js:46272 Array(1)
21:38:34.878 main.js:46273 Array(224)
21:38:34.879 main.js:46275 Object
21:38:34.879 main.js:46270 null
21:38:34.879 main.js:46272 null
21:38:34.880 main.js:46273 Array(224)
21:38:34.881 main.js:46275 Object
21:38:34.881 main.js:46270 null
21:38:34.881 main.js:46272 null
21:38:34.881 main.js:46273 Array(224)
21:38:34.882 main.js:46275 Object
21:38:34.883 main.js:46270 null
21:38:34.883 main.js:46272 null
21:38:34.883 main.js:46273 Array(224)
21:38:34.884 main.js:46275 Object
21:38:34.884 main.js:46270 null
21:38:34.885 main.js:46272 null
21:38:34.885 main.js:46273 Array(224)
21:38:34.886 main.js:46275 Object
21:38:34.886 main.js:46270 Array(1)
21:38:34.886 main.js:46272 Array(1)
21:38:34.886 main.js:46273 Array(224)
21:38:34.887 main.js:46275 Object
21:38:34.888 main.js:46270 null
21:38:34.888 main.js:46272 null
21:38:34.888 main.js:46273 Array(224)
21:38:34.889 main.js:46275 Object
21:38:34.889 main.js:46270 Array(1)
21:38:34.890 main.js:46272 Array(1)
21:38:34.890 main.js:46273 Array(224)
21:38:34.891 main.js:46275 Object
21:38:34.891 main.js:46270 Array(1)
21:38:34.892 main.js:46272 Array(1)
21:38:34.892 main.js:46273 Array(224)
21:38:34.893 main.js:46275 Object
21:38:34.893 main.js:46270 null
21:38:34.893 main.js:46272 null
21:38:34.893 main.js:46273 Array(224)
21:38:34.894 main.js:46275 Object
21:38:34.895 main.js:46270 null
21:38:34.895 main.js:46272 null
21:38:34.895 main.js:46273 Array(224)
21:38:34.896 main.js:46275 Object
21:38:34.897 main.js:46270 null
21:38:34.897 main.js:46272 null
21:38:34.897 main.js:46273 Array(224)
21:38:34.902 main.js:46275 Object
21:38:34.902 main.js:46270 null
21:38:34.902 main.js:46272 null
21:38:34.902 main.js:46273 Array(224)
21:38:34.904 main.js:46275 Object
21:38:34.904 main.js:46270 null
21:38:34.904 main.js:46272 null
21:38:34.904 main.js:46273 Array(224)
21:38:34.912 main.js:46275 Object
21:38:34.912 main.js:46270 null
21:38:34.913 main.js:46272 null
21:38:34.913 main.js:46273 Array(224)
21:38:34.914 main.js:46275 Object
21:38:34.915 main.js:46270 Array(1)
21:38:34.915 main.js:46272 Array(1)
21:38:34.915 main.js:46273 Array(224)
21:38:34.916 main.js:46275 Object
21:38:34.916 main.js:46270 null
21:38:34.916 main.js:46272 null
21:38:34.916 main.js:46273 Array(224)
21:38:34.917 main.js:46275 Object
21:38:34.918 main.js:46270 null
21:38:34.918 main.js:46272 null
21:38:34.918 main.js:46273 Array(224)
21:38:34.919 main.js:46275 Object
21:38:34.919 main.js:46270 Array(1)
21:38:34.920 main.js:46272 Array(1)
21:38:34.920 main.js:46273 Array(224)
21:38:34.921 main.js:46275 Object
21:38:34.922 main.js:46270 Array(2)
21:38:34.922 main.js:46272 Array(2)
21:38:34.922 main.js:46273 Array(224)
21:38:34.929 main.js:46275 Object
21:38:34.930 main.js:46270 Array(1)
21:38:34.930 main.js:46272 Array(1)
21:38:34.930 main.js:46273 Array(224)
21:38:34.931 main.js:46275 Object
21:38:34.934 main.js:46270 null
21:38:34.934 main.js:46272 null
21:38:34.934 main.js:46273 Array(224)
21:38:34.936 main.js:46275 Object
21:38:34.936 main.js:46270 null
21:38:34.936 main.js:46272 null
21:38:34.937 main.js:46273 Array(224)
21:38:34.938 main.js:46275 Object
21:38:34.938 main.js:46270 null
21:38:34.938 main.js:46272 null
21:38:34.939 main.js:46273 Array(224)
21:38:34.940 main.js:46275 Object
21:38:34.940 main.js:46270 Array(1)
21:38:34.940 main.js:46272 Array(1)
21:38:34.941 main.js:46273 Array(224)
21:38:34.942 main.js:46275 Object
21:38:34.942 main.js:46270 null
21:38:34.942 main.js:46272 null
21:38:34.942 main.js:46273 Array(224)
21:38:34.944 main.js:46275 Object
21:38:34.944 main.js:46270 null
21:38:34.944 main.js:46272 null
21:38:34.945 main.js:46273 Array(224)
21:38:34.946 main.js:46275 Object
21:38:34.946 main.js:46270 null
21:38:34.946 main.js:46272 null
21:38:34.947 main.js:46273 Array(224)
21:38:34.948 main.js:46275 Object
21:38:34.948 main.js:46270 null
21:38:34.949 main.js:46272 null
21:38:34.949 main.js:46273 Array(224)
21:38:34.950 main.js:46275 Object
21:38:34.950 main.js:46270 Array(1)
21:38:34.951 main.js:46272 Array(1)
21:38:34.951 main.js:46273 Array(224)
21:38:34.956 main.js:46275 Object
21:38:34.956 main.js:46270 Array(1)
21:38:34.957 main.js:46272 Array(1)
21:38:34.958 main.js:46273 Array(224)
21:38:34.960 main.js:46275 Object
21:38:34.960 main.js:46270 null
21:38:34.962 main.js:46272 null
21:38:34.963 main.js:46273 Array(224)
21:38:34.964 main.js:46275 Object
21:38:34.964 main.js:46270 null
21:38:34.964 main.js:46272 null
21:38:34.965 main.js:46273 Array(224)
21:38:34.966 main.js:46275 Object
21:38:34.966 main.js:46270 null
21:38:34.966 main.js:46272 null
21:38:34.966 main.js:46273 Array(224)
21:38:34.967 main.js:46275 Object
21:38:34.968 main.js:46270 Array(1)
21:38:34.968 main.js:46272 Array(1)
21:38:34.968 main.js:46273 Array(224)
21:38:34.969 main.js:46275 Object
21:38:34.969 main.js:46270 Array(1)
21:38:34.969 main.js:46272 Array(1)
21:38:34.969 main.js:46273 Array(224)
21:38:34.971 main.js:46275 Object
21:38:34.971 main.js:46270 null
21:38:34.971 main.js:46272 null
21:38:34.971 main.js:46273 Array(224)
21:38:34.974 main.js:46275 Object
21:38:34.974 main.js:46270 null
21:38:34.974 main.js:46272 null
21:38:34.974 main.js:46273 Array(224)
21:38:34.976 main.js:46275 Object
21:38:34.976 main.js:46270 Array(2)
21:38:34.976 main.js:46272 Array(2)
21:38:34.977 main.js:46273 Array(224)
21:38:34.978 main.js:46275 Object
21:38:34.979 main.js:46270 null
21:38:34.979 main.js:46272 null
21:38:34.979 main.js:46273 Array(224)
21:38:34.980 main.js:46275 Object
21:38:34.981 main.js:46270 null
21:38:34.981 main.js:46272 null
21:38:34.982 main.js:46273 Array(224)
21:38:34.983 main.js:46275 Object
21:38:34.983 main.js:46270 null
21:38:34.984 main.js:46272 null
21:38:34.984 main.js:46273 Array(224)
21:38:34.985 main.js:46275 Object
21:38:34.986 main.js:46270 Array(1)
21:38:34.986 main.js:46272 Array(1)
21:38:34.986 main.js:46273 Array(224)
21:38:34.988 main.js:46275 Object
21:38:34.989 main.js:46270 null
21:38:34.989 main.js:46272 null
21:38:34.989 main.js:46273 Array(224)
21:38:34.991 main.js:46275 Object
21:38:34.991 main.js:46270 null
21:38:34.992 main.js:46272 null
21:38:34.992 main.js:46273 Array(224)
21:38:34.993 main.js:46275 Object
21:38:34.994 main.js:46270 null
21:38:34.994 main.js:46272 null
21:38:34.994 main.js:46273 Array(224)
21:38:34.996 main.js:46275 Object
21:38:34.996 main.js:46270 null
21:38:34.996 main.js:46272 null
21:38:34.996 main.js:46273 Array(224)
21:38:34.998 main.js:46275 Object
21:38:34.998 main.js:46270 null
21:38:34.998 main.js:46272 null
21:38:34.999 main.js:46273 Array(224)
21:38:35.000 main.js:46275 Object
21:38:35.000 main.js:46270 null
21:38:35.001 main.js:46272 null
21:38:35.001 main.js:46273 Array(224)
21:38:35.002 main.js:46275 Object
21:38:35.003 main.js:46270 null
21:38:35.003 main.js:46272 null
21:38:35.003 main.js:46273 Array(224)
21:38:35.004 main.js:46275 Object
21:38:35.004 main.js:46270 Array(1)
21:38:35.004 main.js:46272 Array(1)
21:38:35.004 main.js:46273 Array(224)
21:38:35.005 main.js:46275 Object
21:38:35.006 main.js:46270 null
21:38:35.006 main.js:46272 null
21:38:35.006 main.js:46273 Array(224)
21:38:35.007 main.js:46275 Object
21:38:35.007 main.js:46270 null
21:38:35.007 main.js:46272 null
21:38:35.008 main.js:46273 Array(224)
21:38:35.009 main.js:46275 Object
21:38:35.009 main.js:46270 null
21:38:35.009 main.js:46272 null
21:38:35.009 main.js:46273 Array(224)
21:38:35.010 main.js:46275 Object
21:38:35.011 main.js:46270 Array(1)
21:38:35.011 main.js:46272 Array(1)
21:38:35.011 main.js:46273 Array(224)
21:38:35.012 main.js:46275 Object
21:38:35.013 main.js:46270 null
21:38:35.013 main.js:46272 null
21:38:35.013 main.js:46273 Array(224)
21:38:35.014 main.js:46275 Object
21:38:35.014 main.js:46270 null
21:38:35.015 main.js:46272 null
21:38:35.015 main.js:46273 Array(224)
21:38:35.016 main.js:46275 Object
21:38:35.016 main.js:46270 null
21:38:35.016 main.js:46272 null
21:38:35.023 main.js:46273 Array(224)
21:38:35.024 main.js:46275 Object
21:38:35.024 main.js:46270 null
21:38:35.026 main.js:46272 null
21:38:35.027 main.js:46273 Array(224)
21:38:35.029 main.js:46275 Object
21:38:35.029 main.js:46270 null
21:38:35.031 main.js:46272 null
21:38:35.032 main.js:46273 Array(224)
21:38:35.034 main.js:46275 Object
21:38:35.034 main.js:46270 null
21:38:35.036 main.js:46272 null
21:38:35.036 main.js:46273 Array(224)
21:38:35.039 main.js:46275 Object
21:38:35.039 main.js:46270 null
21:38:35.041 main.js:46272 null
21:38:35.042 main.js:46273 Array(224)
21:38:35.045 main.js:46275 Object
21:38:35.046 main.js:46270 null
21:38:35.046 main.js:46272 null
21:38:35.047 main.js:46273 Array(224)
21:38:35.049 main.js:46275 Object
21:38:35.049 main.js:46270 null
21:38:35.050 main.js:46272 null
21:38:35.050 main.js:46273 Array(224)
21:38:35.051 main.js:46275 Object
21:38:35.051 main.js:46270 Array(1)
21:38:35.051 main.js:46272 Array(1)
21:38:35.052 main.js:46273 Array(224)
21:38:35.053 main.js:46275 Object
21:38:35.053 main.js:46270 Array(1)
21:38:35.053 main.js:46272 Array(1)
21:38:35.053 main.js:46273 Array(224)
21:38:35.055 main.js:46275 Object
21:38:35.055 main.js:46270 null
21:38:35.055 main.js:46272 null
21:38:35.055 main.js:46273 Array(224)
21:38:35.056 main.js:46275 Object
21:38:35.057 main.js:46270 null
21:38:35.058 main.js:46272 null
21:38:35.058 main.js:46273 Array(224)
21:38:35.059 main.js:46275 Object
21:38:35.059 main.js:46270 null
21:38:35.060 main.js:46272 null
21:38:35.060 main.js:46273 Array(224)
21:38:35.061 main.js:46275 Object
21:38:35.061 main.js:46270 null
21:38:35.061 main.js:46272 null
21:38:35.061 main.js:46273 Array(224)
21:38:35.062 main.js:46275 Object
21:38:35.063 main.js:46270 Array(1)
21:38:35.063 main.js:46272 Array(1)
21:38:35.063 main.js:46273 Array(224)
21:38:35.064 main.js:46275 Object
21:38:35.064 main.js:46270 null
21:38:35.065 main.js:46272 null
21:38:35.065 main.js:46273 Array(224)
21:38:35.066 main.js:46275 Object
21:38:35.066 main.js:46270 null
21:38:35.066 main.js:46272 null
21:38:35.066 main.js:46273 Array(224)
21:38:35.069 main.js:46275 Object
21:38:35.070 main.js:46270 null
21:38:35.071 main.js:46272 null
21:38:35.071 main.js:46273 Array(224)
21:38:35.073 main.js:46275 Object
21:38:35.073 main.js:46270 null
21:38:35.074 main.js:46272 null
21:38:35.075 main.js:46273 Array(224)
21:38:35.076 main.js:46275 Object
21:38:35.076 main.js:46270 null
21:38:35.078 main.js:46272 null
21:38:35.079 main.js:46273 Array(224)
21:38:35.082 main.js:46275 Object
21:38:35.083 main.js:46270 null
21:38:35.083 main.js:46272 null
21:38:35.083 main.js:46273 Array(224)
21:38:35.084 main.js:46275 Object
21:38:35.085 main.js:46270 null
21:38:35.085 main.js:46272 null
21:38:35.085 main.js:46273 Array(224)
21:38:35.086 main.js:46275 Object
21:38:35.086 main.js:46270 null
21:38:35.086 main.js:46272 null
21:38:35.086 main.js:46273 Array(224)
21:38:35.087 main.js:46275 Object
21:38:35.088 main.js:46270 Array(1)
21:38:35.088 main.js:46272 Array(1)
21:38:35.088 main.js:46273 Array(224)
21:38:35.089 main.js:46275 Object
21:38:35.089 main.js:46270 Array(1)
21:38:35.090 main.js:46272 Array(1)
21:38:35.090 main.js:46273 Array(224)
21:38:35.091 main.js:46275 Object
21:38:35.092 main.js:46270 null
21:38:35.093 main.js:46272 null
21:38:35.093 main.js:46273 Array(224)
21:38:35.095 main.js:46275 Object
21:38:35.095 main.js:46270 null
21:38:35.096 main.js:46272 null
21:38:35.096 main.js:46273 Array(224)
21:38:35.098 main.js:46275 Object
21:38:35.098 main.js:46270 null
21:38:35.098 main.js:46272 null
21:38:35.098 main.js:46273 Array(224)
21:38:35.100 main.js:46275 Object
21:38:35.101 main.js:46270 null
21:38:35.101 main.js:46272 null
21:38:35.101 main.js:46273 Array(224)
21:38:35.102 main.js:46275 Object
21:38:35.103 main.js:46270 Array(1)
21:38:35.104 main.js:46272 Array(1)
21:38:35.104 main.js:46273 Array(224)
21:38:35.105 main.js:46275 Object
21:38:35.106 main.js:46270 null
21:38:35.106 main.js:46272 null
21:38:35.106 main.js:46273 Array(224)
21:38:35.107 main.js:46275 Object
21:38:35.108 main.js:46270 null
21:38:35.108 main.js:46272 null
21:38:35.108 main.js:46273 Array(224)
21:38:35.109 main.js:46275 Object
21:38:35.110 main.js:46270 Array(2)
21:38:35.110 main.js:46272 Array(2)
21:38:35.110 main.js:46273 Array(224)
21:38:35.111 main.js:46275 Object
21:38:35.114 main.js:46270 null
21:38:35.114 main.js:46272 null
21:38:35.115 main.js:46273 Array(224)
21:38:35.116 main.js:46275 Object
21:38:35.116 main.js:46270 Array(2)
21:38:35.116 main.js:46272 Array(2)
21:38:35.117 main.js:46273 Array(224)
21:38:35.119 main.js:46275 Object
21:38:35.119 main.js:46270 Array(1)
21:38:35.120 main.js:46272 Array(1)
21:38:35.120 main.js:46273 Array(224)
21:38:35.121 main.js:46275 Object
21:38:35.121 main.js:46270 null
21:38:35.122 main.js:46272 null
21:38:35.122 main.js:46273 Array(224)
21:38:35.123 main.js:46275 Object
21:38:35.123 main.js:46270 Array(1)
21:38:35.123 main.js:46272 Array(1)
21:38:35.124 main.js:46273 Array(224)
21:38:35.125 main.js:46275 Object
21:38:35.125 main.js:46270 Array(1)
21:38:35.125 main.js:46272 Array(1)
21:38:35.125 main.js:46273 Array(224)
21:38:35.127 main.js:46275 Object
21:38:35.127 main.js:46270 null
21:38:35.127 main.js:46272 null
21:38:35.127 main.js:46273 Array(224)
21:38:35.129 main.js:46275 Object
21:38:35.129 main.js:46270 null
21:38:35.129 main.js:46272 null
21:38:35.129 main.js:46273 Array(224)
21:38:35.131 main.js:46275 Object
21:38:35.131 main.js:46270 null
21:38:35.131 main.js:46272 null
21:38:35.131 main.js:46273 Array(224)
21:38:35.133 main.js:46275 Object
21:38:35.133 main.js:46270 Array(1)
21:38:35.133 main.js:46272 Array(1)
21:38:35.134 main.js:46273 Array(224)
21:38:35.135 main.js:46275 Object
21:38:35.135 main.js:46270 Array(1)
21:38:35.135 main.js:46272 Array(1)
21:38:35.136 main.js:46273 Array(224)
21:38:35.137 main.js:46275 Object
21:38:35.137 main.js:46270 null
21:38:35.137 main.js:46272 null
21:38:35.137 main.js:46273 Array(224)
21:38:35.139 main.js:46275 Object
21:38:35.139 main.js:46270 null
21:38:35.139 main.js:46272 null
21:38:35.139 main.js:46273 Array(224)
21:38:35.140 main.js:46275 Object
21:38:35.141 main.js:46270 null
21:38:35.141 main.js:46272 null
21:38:35.141 main.js:46273 Array(224)
21:38:35.142 main.js:46275 Object
21:38:35.142 main.js:46270 null
21:38:35.142 main.js:46272 null
21:38:35.143 main.js:46273 Array(224)
21:38:35.144 main.js:46275 Object
21:38:35.144 main.js:46270 null
21:38:35.144 main.js:46272 null
21:38:35.144 main.js:46273 Array(224)
21:38:35.145 main.js:46275 Object
21:38:35.145 main.js:46270 null
21:38:35.146 main.js:46272 null
21:38:35.146 main.js:46273 Array(224)
21:38:35.147 main.js:46275 Object
21:38:35.147 main.js:46270 null
21:38:35.147 main.js:46272 null
21:38:35.147 main.js:46273 Array(224)
21:38:35.148 main.js:46275 Object
21:38:35.149 main.js:46270 null
21:38:35.149 main.js:46272 null
21:38:35.149 main.js:46273 Array(224)
21:38:35.150 main.js:46275 Object
21:38:35.150 main.js:46270 null
21:38:35.150 main.js:46272 null
21:38:35.151 main.js:46273 Array(224)
21:38:35.152 main.js:46275 Object
21:38:35.152 main.js:46270 null
21:38:35.152 main.js:46272 null
21:38:35.152 main.js:46273 Array(224)
21:38:35.154 main.js:46275 Object
21:38:35.154 main.js:46275 Object
21:38:35.154 main.js:46270 null
21:38:35.155 main.js:46272 null
21:38:35.155 main.js:46273 Array(224)
21:38:35.156 main.js:46275 Object
21:38:35.156 main.js:46270 null
21:38:35.156 main.js:46272 null
21:38:35.156 main.js:46273 Array(224)
21:38:35.157 main.js:46275 Object
21:38:35.158 main.js:46270 null
21:38:35.158 main.js:46272 null
21:38:35.158 main.js:46273 Array(224)
21:38:35.159 main.js:46275 Object
21:38:35.159 main.js:46270 Array(1)
21:38:35.159 main.js:46272 Array(1)
21:38:35.160 main.js:46273 Array(224)
21:38:35.161 main.js:46275 Object
21:38:35.161 main.js:46270 null
21:38:35.161 main.js:46272 null
21:38:35.161 main.js:46273 Array(224)
21:38:35.162 main.js:46275 Object
21:38:35.163 main.js:46270 null
21:38:35.163 main.js:46272 null
21:38:35.163 main.js:46273 Array(224)
21:38:35.164 main.js:46275 Object
21:38:35.165 main.js:46270 null
21:38:35.165 main.js:46272 null
21:38:35.165 main.js:46273 Array(224)
21:38:35.166 main.js:46275 Object
21:38:35.167 main.js:46270 null
21:38:35.167 main.js:46272 null
21:38:35.168 main.js:46273 Array(224)
21:38:35.169 main.js:46275 Object
21:38:35.170 main.js:46270 null
21:38:35.170 main.js:46272 null
21:38:35.170 main.js:46273 Array(224)
21:38:35.171 main.js:46275 Object
21:38:35.171 main.js:46270 null
21:38:35.172 main.js:46272 null
21:38:35.172 main.js:46273 Array(224)
21:38:35.173 main.js:46275 Object
21:38:35.174 main.js:46270 null
21:38:35.174 main.js:46272 null
21:38:35.174 main.js:46273 Array(224)
21:38:35.176 main.js:46275 Object
21:38:35.176 main.js:46270 null
21:38:35.176 main.js:46272 null
21:38:35.176 main.js:46273 Array(224)
21:38:35.177 main.js:46275 Object
21:38:35.179 main.js:46270 null
21:38:35.179 main.js:46272 null
21:38:35.179 main.js:46273 Array(224)
21:38:35.180 main.js:46275 Object
21:38:35.182 main.js:46270 null
21:38:35.182 main.js:46272 null
21:38:35.182 main.js:46273 Array(224)
21:38:35.183 main.js:46275 Object
21:38:35.184 main.js:46270 null
21:38:35.184 main.js:46272 null
21:38:35.184 main.js:46273 Array(224)
21:38:35.185 main.js:46275 Object
21:38:35.185 main.js:46270 null
21:38:35.186 main.js:46272 null
21:38:35.186 main.js:46273 Array(224)
21:38:35.187 main.js:46275 Object
21:38:35.187 main.js:46270 null
21:38:35.187 main.js:46272 null
21:38:35.187 main.js:46273 Array(224)
21:38:35.188 main.js:46275 Object
21:38:35.189 main.js:46270 null
21:38:35.189 main.js:46272 null
21:38:35.189 main.js:46273 Array(224)
21:38:35.190 main.js:46275 Object
21:38:35.190 main.js:46270 null
21:38:35.191 main.js:46272 null
21:38:35.191 main.js:46273 Array(224)
21:38:35.192 main.js:46275 Object
21:38:35.195 main.js:46270 null
21:38:35.195 main.js:46272 null
21:38:35.195 main.js:46273 Array(224)
21:38:35.196 main.js:46275 Object
21:38:35.196 main.js:46270 null
21:38:35.196 main.js:46272 null
21:38:35.197 main.js:46273 Array(224)
21:38:35.200 main.js:46275 Object
21:38:35.201 main.js:46270 null
21:38:35.201 main.js:46272 null
21:38:35.201 main.js:46273 Array(224)
21:38:35.202 main.js:46275 Object
21:38:35.203 main.js:46270 null
21:38:35.203 main.js:46272 null
21:38:35.203 main.js:46273 Array(224)
21:38:35.205 main.js:46275 Object
21:38:35.205 main.js:46270 null
21:38:35.205 main.js:46272 null
21:38:35.207 main.js:46273 Array(224)
21:38:35.209 main.js:46275 Object
21:38:35.209 main.js:46270 null
21:38:35.210 main.js:46272 null
21:38:35.211 main.js:46273 Array(224)
21:38:35.213 main.js:46275 Object
21:38:35.215 main.js:46270 null
21:38:35.215 main.js:46272 null
21:38:35.215 main.js:46273 Array(224)
21:38:35.217 main.js:46275 Object
21:38:35.218 main.js:46270 null
21:38:35.219 main.js:46272 null
21:38:35.220 main.js:46273 Array(224)
21:38:35.222 main.js:46275 Object
21:38:35.223 main.js:46270 null
21:38:35.223 main.js:46272 null
21:38:35.224 main.js:46273 Array(224)
21:38:35.226 main.js:46275 Object
21:38:35.227 main.js:46270 null
21:38:35.227 main.js:46272 null
21:38:35.228 main.js:46273 Array(224)
21:38:35.230 main.js:46275 Object
21:38:35.231 main.js:46270 null
21:38:35.231 main.js:46272 null
21:38:35.231 main.js:46273 Array(224)
21:38:35.232 main.js:46275 Object
21:38:35.233 main.js:46270 null
21:38:35.233 main.js:46272 null
21:38:35.233 main.js:46273 Array(224)
21:38:35.234 main.js:46275 Object
21:38:35.235 main.js:46270 Array(2)
21:38:35.235 main.js:46272 Array(2)
21:38:35.235 main.js:46273 Array(224)
21:38:35.236 main.js:46275 Object
21:38:35.236 main.js:46270 null
21:38:35.236 main.js:46272 null
21:38:35.237 main.js:46273 Array(224)
21:38:35.238 main.js:46275 Object
21:38:35.238 main.js:46270 null
21:38:35.238 main.js:46272 null
21:38:35.238 main.js:46273 Array(224)
21:38:35.239 main.js:46275 Object
21:38:35.239 main.js:46270 null
21:38:35.240 main.js:46272 null
21:38:35.240 main.js:46273 Array(224)
21:38:35.241 main.js:46275 Object
21:38:35.241 main.js:46270 null
21:38:35.241 main.js:46272 null
21:38:35.241 main.js:46273 Array(224)
21:38:35.242 main.js:46275 Object
21:38:35.243 main.js:46270 null
21:38:35.243 main.js:46272 null
21:38:35.243 main.js:46273 Array(224)
21:38:35.245 main.js:46275 Object
21:38:35.245 main.js:46270 null
21:38:35.245 main.js:46272 null
21:38:35.245 main.js:46273 Array(224)
21:38:35.246 main.js:46275 Object
21:38:35.246 main.js:46270 null
21:38:35.247 main.js:46272 null
21:38:35.247 main.js:46273 Array(224)
21:38:35.248 main.js:46275 Object
21:38:35.248 main.js:46270 null
21:38:35.248 main.js:46272 null
21:38:35.248 main.js:46273 Array(224)
21:38:35.249 main.js:46275 Object
21:38:35.250 main.js:46270 null
21:38:35.250 main.js:46272 null
21:38:35.250 main.js:46273 Array(224)
21:38:35.252 main.js:46275 Object
21:38:35.252 main.js:46270 null
21:38:35.252 main.js:46272 null
21:38:35.253 main.js:46273 Array(224)
21:38:35.254 main.js:46275 Object
21:38:35.254 main.js:46270 null
21:38:35.255 main.js:46272 null
21:38:35.255 main.js:46273 Array(224)
21:38:35.256 main.js:46275 Object
21:38:35.257 main.js:46270 null
21:38:35.257 main.js:46272 null
21:38:35.257 main.js:46273 Array(224)
21:38:35.259 main.js:46275 Object
21:38:35.259 main.js:46270 null
21:38:35.259 main.js:46272 null
21:38:35.260 main.js:46273 Array(224)
21:38:35.261 main.js:46275 Object
21:38:35.262 main.js:46270 null
21:38:35.262 main.js:46272 null
21:38:35.262 main.js:46273 Array(224)
21:38:35.263 main.js:46275 Object
21:38:35.264 main.js:46270 null
21:38:35.264 main.js:46272 null
21:38:35.264 main.js:46273 Array(224)
21:38:35.266 main.js:46275 Object
21:38:35.266 main.js:46270 null
21:38:35.266 main.js:46272 null
21:38:35.266 main.js:46273 Array(224)
21:38:35.267 main.js:46275 Object
21:38:35.268 main.js:46270 null
21:38:35.268 main.js:46272 null
21:38:35.269 main.js:46273 Array(224)
21:38:35.281 main.js:46275 Object
21:38:35.281 main.js:46270 null
21:38:35.281 main.js:46272 null
21:38:35.282 main.js:46273 Array(224)
21:38:35.283 main.js:46275 Object
21:38:35.283 main.js:46270 null
21:38:35.283 main.js:46272 null
21:38:35.283 main.js:46273 Array(224)
21:38:35.285 main.js:46275 Object
21:38:35.285 main.js:46270 null
21:38:35.285 main.js:46272 null
21:38:35.285 main.js:46273 Array(224)
21:38:35.286 main.js:46275 Object
21:38:35.287 main.js:46270 null
21:38:35.287 main.js:46272 null
21:38:35.287 main.js:46273 Array(224)
21:38:35.288 main.js:46275 Object
21:38:35.289 main.js:46270 null
21:38:35.289 main.js:46272 null
21:38:35.289 main.js:46273 Array(224)
21:38:35.290 main.js:46275 Object
21:38:35.290 main.js:46270 null
21:38:35.290 main.js:46272 null
21:38:35.291 main.js:46273 Array(224)
21:38:35.292 main.js:46275 Object
21:38:35.292 main.js:46270 null
21:38:35.292 main.js:46272 null
21:38:35.292 main.js:46273 Array(224)
21:38:35.294 main.js:46275 Object
21:38:35.294 main.js:46270 null
21:38:35.294 main.js:46272 null
21:38:35.294 main.js:46273 Array(224)
21:38:35.296 main.js:46275 Object
21:38:35.296 main.js:46270 null
21:38:35.296 main.js:46272 null
21:38:35.297 main.js:46273 Array(224)
21:38:35.298 main.js:46275 Object
21:38:35.298 main.js:46270 null
21:38:35.299 main.js:46272 null
21:38:35.299 main.js:46273 Array(224)
21:38:35.300 main.js:46275 Object
21:38:35.300 main.js:46270 null
21:38:35.300 main.js:46272 null
21:38:35.300 main.js:46273 Array(224)
21:38:35.302 main.js:46275 Object
21:38:35.302 main.js:46270 null
21:38:35.302 main.js:46272 null
21:38:35.302 main.js:46273 Array(224)
21:38:35.303 main.js:46275 Object
21:38:38.252 [object%20Object] Failed to load resource: net::ERR_FILE_NOT_FOUND
21:38:38.259 [object%20Object],[object%20Object] Failed to load resource: net::ERR_FILE_NOT_FOUND

Sujan12 · July 6, 2017, 4:24pm

You have to console.log(contacts); outside of the loop of course, and then look at the structure of the array and its content. Doing that you learn if all contacts have photos, what structure the photos have if there is one etc.

rapropos · July 6, 2017, 7:50pm

I find this entire code structure baffling. We are looping across contacts and it looks to me like we pushing new items onto it representing a contact that is already in the list. I can’t see how that makes any sense.

KishuPro · July 7, 2017, 6:16am

You are doing everything fine except that you don’t know the data structures you are dealing with (and have confused others too in the process). Most probably because you’ve copy pasted this code, that’s okay though. The thing is, you have to understand what the code is doing. Here is what it is actually doing and what your problem is:

The Contacts service/facade is fetching native Android mobile contacts for you ( co:Contacts, co.find )
You are adapting the returned data ( contacts ) and filling the local obj object with required values inside the loop
You are pushing the filled obj into the local contacts array ( this.contacts.push(obj) ) thereby creating a local copy of the records to use in your template

Now the problem:

obj["image"]= contacts[i].photos;

The above line is fetching the photos object rather than the url of the image you need, that’s why you are getting the Failed to load [object%02Object] error. You need to know the structure of the photos object to fetch the url from it. That’s what @Sujan12 has been trying to request from you in different ways, but to no avail.

If you refer to the docs for the relevant plugin, I’d guess the photos object is a ContactField object and has a property named value. So to really make sure that you are actually getting an url or not, change the for loop to the following and show us the screen shot of the console:

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;      
      this.contacts.push(obj)   
      console.log("Image URL: " + contacts[i].photos[0].value);
   }    
}

This will show you whatever is being returned as the value properties of the photos objects, whether those have image urls or not is a different matter and affects the ultimate output.

vithika · July 7, 2017, 6:24am

When i am writing …Contacts[i]. Photos [0].Value…
I am getting the error with no output on the screen…
Cannot read property 0 of null…
But if I am writing
Contacts[i]. Photo.
I am getting name and phone number but no photos.

KishuPro · July 7, 2017, 6:30am

Please do as I said, change the loop to exactly what I’ve written and show me the screenshot of the console. Perhaps you don’t have images set for the contacts the *ngFor is iterating over first and you are not checking for that in the template as there is no condition around the <img> tag. In effect, it will show the error you are saying it is showing.

vithika · July 7, 2017, 6:38am

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

vithika · July 7, 2017, 6:41am

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

sonuyadav · July 7, 2017, 6:42am

Avoid to share contact list real numbers. thanks

KishuPro · July 7, 2017, 6:45am

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

vithika · July 7, 2017, 6:49am

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

KishuPro · July 7, 2017, 6:53am

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.

vithika · July 7, 2017, 7:04am

still the same output…

vithika · July 7, 2017, 7:10am

KishuPro · July 7, 2017, 7:13am

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

vithika · July 7, 2017, 7:58am

Topic		Replies	Views
Cannot display contact's image using the contacts plugin ionic-v3	5	2116	October 9, 2017
How to display contacts photos Ionic Native	9	4851	June 25, 2019
How to display contact photo using cordova + ionic + android ionic-v3	6	1815	October 16, 2017
Display contact photo using cordova + ionic + android cordova	7	5696	July 19, 2021
Getting contacts displayName and phoneNumbers ionic-v3	9	9845	May 22, 2018

Image not displaying while displaying contacts

Related topics