4

I'm pulling in data from a SharePoint list and I'm having some issues pulling in certain columns. I was able to successfully pull in the 'Title' column which is a single line of text, but 'Rank' and 'Franchises' which are Number/Lookup columns aren't able to be pulled in.

Rank: List=%7BFC69F036-C96F-4AB5-AD0E-CD0F09E05163%7D&Field=Rank
Franchises: List=%7BFC69F036-C96F-4AB5-AD0E-CD0F09E05163%7D&Field=Franchises

List: enter image description here

Webpage Output: enter image description here

Here my code:

<script>
$(document).ready(function(){
    $pnp.setup({
        baseUrl: "https://fh126cloud.sharepoint.com/sites/FH_HomeInsteadCRM/"
    });

    $pnp.sp.web.lists.getByTitle("Test").items.get().then(function(items) {
        console.log(items);
        var result = items.map(item => {
            return {
                Title: item.Title,
                Description: item.Rank,
                Link: item.Franchises
            }
        });
        var $table = roadMapDisplay(result);
        console.log($table);     
        $('#title').html($table);
    });

    function roadMapDisplay(items) {

        var table = $('<table id="TablePanel" style="width:100%" border="1 px"><thead><tr><td>Make</td>' + '<td>Model</td>' + '<td>Price</td>' + '</tr></thead><tbody>');
        items.forEach(item => {
            table.append(`<tr>`);
            table.append(`<td>${item.Title}</td>`);
            table.append(`<td>${item.Rank}</td>`);
            table.append(`<td>${item.Franchises}</td>`)
            table.append('<tr/>');
        });
        return table;
    }
});
</script>

<div id="Panel">
   <table id='TablePanel' style="width: 100%;" border="1 px">
     <tr>
       <td>
          <div id="title" style="width: 100%"></div>
      </td>
    </tr>
 </table>
</div>

Is there something that I'm doing wrong? All help would be highly appreciated.

5

Change this part:

table.append(`<td>${item.Title}</td>`);
table.append(`<td>${item.Rank}</td>`);
table.append(`<td>${item.Franchises}</td>`)

to this:

table.append(`<td>${item.Title}</td>`);
table.append(`<td>${item.Description}</td>`);
table.append(`<td>${item.Link}</td>`);
  • 1
    Definitely rookie mistake on my end! Thanks so much Damjan! The number column (Description) I'm able to pull in, but the lookup column (Link) is still undecided. – SaintLouis Events Jan 10 at 18:04
  • 2
    For lookup you should use "expand". Check the example for lookup here: github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items – Damjan Tomic Jan 10 at 18:06
  • I'll have to check it out now, do I create a new $pnp call or implement it on the same one? – SaintLouis Events Jan 10 at 18:08
  • 1
    You should just change the existing call. No need to make another one. Just use select and expand. – Damjan Tomic Jan 10 at 18:10

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.