Displaying jQuery objects in a loop to display 3 latest lists

[eventsinstlouis]

I have a SharePoint list that I’m using that is being populated with a RSS Feed web-part. I’m stuck on a part where I’m needing to display some content but it’s not working correctly. Below I will describe all the steps that I’m doing.

1.) Microsoft Flow RSS to SharePoint list is working OK.

2.) Here is my JS code which is working OK. This is the roadmap.js file.

$(document).ready(function() {
            $pnp.setup({
                baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
            });
            $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z) {
                console.log(z);
                var result = z.results.map(a => ({
                    Title: `${a.Title}`,
                    Description: `${a.Description}`,
                    Link: `${a.Link}`
                }));
                console.log(result);
                roadMapDisplay(result);
            })

            function roadMapDisplay(result) {

                var head = "<h1>" + result.Title + "</h1><br/>";
                var desc = "<p>" + result.Description + "</p><br/>";
                var link = "<a src='${[result.Link](https://result.Link)}'>" + [result.Link](https: //result.Link) \+ "</a><br/>";
                    $(".Title").append(head + desc + link);

                }

3.) It’s pulling the data into objects which is what I need. It’s pulling the “Title”, “Description” and “Link” from both objects correctly.

4.) Here is the result from one of the objects inside the dev console on chrome.

5.) Here is my HTML portion - This part is where I’m having trouble, I can’t seem to display the results from “Title” “Description” and “Link”. I’m wanting to only display the latest three objects within the SharePoint list. I need to create a loop that loops the objects with a max of three results [0][1][2].

6.) Here is the roadmap.txt file that the .js file is being referenced from.

<div class="Title"></div>
<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>

Here is what I’m trying to achieve:

All help will be appreciated.

[m_hutley]

@eventsinstlouis

I need to create a loop that loops the objects with a max of three results [0][1][2].

for (let i= 0; i <= 2; i++) {

Except that’s not a valid construction, because there may be less than 3 results.

let i = 0;
while(i < 3 && i < array.length) {
 console.log(array[i].Title);
 i++;
}