0

Im trying to make an LWC that shows a list of contact tiles that have their own url to navigate to the contact record page. I cannot seem to get the url to push into the array in the .then method. When I console log the urls, I can see them displaying correctly in the console but the URL list is undefined. Any help please would be greatly appreciated!

import { LightningElement, api, wire, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getSObjectValue } from '@salesforce/apex';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import getContacts from '@salesforce/apex/AccountController.getContacts';
import ACCOUNTNAME_FIELD from '@salesforce/schema/Account.Name';
import CONTACTID_FIELD from '@salesforce/schema/Contact.Id';

export default class RelationshipMap extends NavigationMixin(LightningElement) {
@track actions = [
    { label: 'Edit', value: 'edit', iconName: 'utility:edit' },
    { label: 'Delete', value: 'delete', iconName: 'utility:delete' },
];
@api recordId;
urlList;
contacts;
error;

@wire(getRecord, { recordId: '$recordId', fields: [ACCOUNTNAME_FIELD]})
account;

/*
@wire(getContacts, { accId: '$recordId' })
contacts;
*/

@wire(getContacts, { accId: '$recordId' })
contacts({ error, data }){
   if(data){
       this.contacts = data;
       this.error = undefined;
    for(let i in this.contacts){
        this[NavigationMixin.GenerateUrl]({
            type: "standard__recordPage",
            attributes: {
                recordId: getSObjectValue(this.contacts[i], CONTACTID_FIELD),
                objectApiName: "Contact",
                actionName: 'view',
            },
        }).then((url) => {
            console.log(url); 
            this.urlList.push(url);
        });
    }
    console.log("URL List: " + this.urlList);
   } else if(error){
       this.error = error;
       this.contacts = undefined;
       console.log("Error");
   }
}

get accountName() {
   return this.account.data ? getFieldValue(this.account.data, ACCOUNTNAME_FIELD) : '';
}
}

2 Answers 2

0

You can use Promise.all to make your code much faster and easier to read:

Promise.all(
  this.contacts.map((contact) =>
    this[NavigationMixin.GenerateUrl]({
      type: "standard__recordPage",
      attributes: {
        recordId: getSObjectValue(contact, CONTACTID_FIELD),
        objectApiName: "Contact",
        actionName: "view",
      },
    })
  )
).then((urls) => (this.urlList = urls));
1
  • Thank you this works perfect! Commented Feb 24, 2022 at 17:43
1

the console.log outside of your promise is displaying undefined due to the asynchronous nature of Promises. this is normal.

6
  • I tried that already and it still does not work. Thanks though. Commented Feb 24, 2022 at 17:20
  • ok, what does console.log(url) display? Commented Feb 24, 2022 at 17:23
  • URL List: undefined /lightning/r/Contact/0038c00002dyhtLAAQ/view /lightning/r/Contact/0038c00002dyhtMAAQ/view /lightning/r/Contact/0038c00002dyhtQAAQ/view /lightning/r/Contact/0038c00002dyhtVAAQ/view Commented Feb 24, 2022 at 17:23
  • Sorry the formatting is a little off those are each on their own line though. Commented Feb 24, 2022 at 17:25
  • 1
    ahh ok thank you for the help. I will have to study promises a little more I think! Commented Feb 24, 2022 at 17:44

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.