Unable to pull in Number/Lookup Columns using pnp.js

Question

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:

Webpage Output:

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.

Answer 1

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>`);