Uncaught in promise Type error Cannot read property ServerRealativeUrl of undefined

Question

I have been using this line previously, and suddenly it does not work.

private  getListData() {
    const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };
    this.props.SPHttpClient.get(this.props.pagecontext.web.absoluteUrl + "/_api/web/lists/getbytitle('News')/items?$select=*,AttachmentFiles&$expand=AttachmentFiles/Title&$orderby=ID desc", SPHttpClient.configurations.v1, opt).then((response: SPHttpClientResponse) => {
      response.json().then((json: any) => {
         for(let i=0;i<json.value.length;i++){
          var url=this.geturl(json.value[i].ID);

            this.data.push({ID:<td>{json.value[i].ID}</td>,
             Title:<td><a href={url} target="_blank">{json.value[i].Title}</a></td>,
             Url:<td><img src={json.value[i].AttachmentFiles[0].ServerRelativeUrl} width="300px" height="300px" /></td>
              });
             //   debugger;

Answer 1

If the attachment is not uploaded for the list item then AttachmentFiles[0] will be undefined. So you need to use it like below:

this.data.push({
                  ID:<td>{json.value[i].ID}</td>,
                  Title:<td><a href={url} target="_blank">{json.value[i].Title}</a></td>,
                  Url:<td><img src={json.value[i].AttachmentFiles[0] ? json.value[i].AttachmentFiles[0].ServerRelativeUrl: ''} width="300px" height="300px" /></td>
              });