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!
    – Benton
    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.
    – Benton
    Feb 24, 2022 at 17:20
  • ok, what does console.log(url) display?
    – glls
    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
    – Benton
    Feb 24, 2022 at 17:23
  • Sorry the formatting is a little off those are each on their own line though.
    – Benton
    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!
    – Benton
    Feb 24, 2022 at 17:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .