SPFX Get Lookup Field Value

[lantonio1974]

Hi,

I am new to SPFX and I am having some problems getting the values from a lookup field on a list. 

Here is the code I am using for testing:

//Here "My List" is Sharepoint list
    pnp.sp.web.lists.getByTitle("My_List").items.select("Lookup_x0020_Field", "Lookup_x0020_FieldId", "Lookup_x0020_Field/Title").expand("Lookup_x0020_Field").getPaged().then(p => {
        console.log(JSON.stringify(p.results, null, 4));
        var itemColl = p.results;
        for (var index = 0; index < itemColl.length; index++) {
            var element = itemColl[index];
            var title = element["Title"];
            var id = element["Id"];
            var lookUpFld = element["Lookup_x0020_Field"];
            var lookUpFldId = lookUpFld["Lookup_x0020_FieldId"];
            console.log("Lookup Field " + lookUpFld + " Lookup Field ID: " + lookUpFldId);
        }
    });
    return Promise.resolve();

Part of the Log

 {
        "odata.type": "SP.Data.MyListItem",
        "odata.id": "GUID",
        "odata.etag": "\"2\"",
        "odata.editLink": "Web/Lists(guid'GUID')/Items(37)",
        "Lookup_x0020_Field@odata.navigationLinkUrl": "Web/Lists(guid'GUID')/Items(37)/Lookup_x0020_Field",
        "Lookup_x0020_Field": {
            "odata.type": "SP.Data.Lookup_x005f_List_x0020_DataListItem",
            "odata.id": "ID",
            "Title": null
        },
        "Lookup_x0020_FieldId": 116
    },

Lookup_x0020_Field is the name of the field on the list I am trying to display the data.

Lookup_x0020_FieldId is the ID of Lookup_x0020_Field. 

There are more list that I need to display data from that have more than one lookup fields. Getting this one working will help with the other lists. 

I also need to know how to display images and URL's from lists. 

Ideas or help will be very much appreciated.

Thank you!

[#2]

I was able to get the data. Looks like the problem was with the name of the column in the list where the lookup field are being store. Instead of the Title field it was using another field.
Any other suggestions are more than welcome.
Thank you!

[#3]

@lantonio1974 

Do you want to display images and URL's from same list ("My List") or the lookup list where the lookup fields are being stored?

If you are trying to show the fields from lookup list then it is not possible to expand the Image/URL columns as lookup columns only supports below column types:

• Single line of text
• Number
• Date and Time

Check below documentation for Supported & Unsupported Column Types:

Create list relationships by using unique and lookup columns 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#4]

@lantonio1974 

This 

var lookUpFldId = lookUpFld["Lookup_x0020_FieldId"];

should be 

var lookUpFldId = element["Lookup_x0020_FieldId"];