Error: Attempting to access 'Hobbies' property of undefined variable

I am encountering a puzzling issue that has me feeling baffled. While making a Sharepoint RestAPI call and iterating over the data using a for loop, I am able to build out the HTML successfully. However, an error keeps popping up despite the fact that the values are being logged in the console and the HTML is displaying correctly. It's quite frustrating.

function getSlideData() {
    var query = "$expand=AttachmentFiles&$select=Title,Team,State,Location,Hobbies,Favorite,Askme,GreatPlace,imageFact,ImageText,Attachments,AttachmentFiles&$expand=AttachmentFiles&$top=1000&$orderby=Created desc&$filter=Display eq 'Active'";
    var svcUrl = SITE_URL + "_api/web/lists/getbytitle('"+LIST_NAME+"')/items?"+query;
    var employeeData;

    $.ajax({
        url: svcUrl,
        type: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        async: false,
        success: function (data) {
            employeeData = data.d.results;
        },
        error: function (xhr) {
            alert("Can't get list items.", xhr.status + ": " + xhr.statusText); 
        }
    });

    return employeeData;
}

function buildSlides() {
    var slideData = getSlideData();
    var sliderWrapper = $('#slider-wrapper');
    var sliderWrapperContent = "";

    for(i=0;i<=slideData.length;i++) {
        sliderWrapperContent += '<div><h2>'+slideData[i].Hobbies+'</h2></div>';
        sliderWrapper.html(sliderWrapperContent);
    }
}

Answer №1

The issue at hand is attempting to access an index outside the array's bounds due to using <= in the for loop condition. Utilize < instead when referencing the .length property of an array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to extract the frameset from a frame window?

Here is a code snippet to consider: function conceal(frameElem) { var frameSet = frameElem.frameSet; //<-- this doesn't seem to be working $(frameSet).attr('cols', '0,*'); } //conceal the parent frame conceal(window.pa ...

What is the process for including a new item in the p-breadcrumb list?

Having trouble getting my code to add a new item to the p-breadcrumb list on click. Any assistance would be greatly appreciated. Thank you in advance! Check out the live demo here ngOnInit() { this.items = [ {label: 'Computer'}, ...

There seems to be an issue with my view loading CSS/JS files that are not located within

I have been working on my MVC 3 application and encountered some challenges with loading CSS, images, and JS files from the root folder. When I tried to run my view located in the Views folder, I faced the following output: <link href="@Url.Content("~ ...

Leveraging .tsx components within nested .tsx components in React Native

Currently, I am delving into the world of building apps using TypeScript in React Native. Coming from a background as a Swift developer, adjusting to JavaScript and TypeScript has been an interesting journey. An observation that stood out to me is the cha ...

Is it possible to increase the width of a div by 1% within a loop using solely JavaScript?

I have been attempting to increase the width of the div by 1% using JavaScript. My goal is to create a smooth transition, but traditional animations did not work because I need to set specific conditions. window.onload = function(){ for (let i = 0 ...

Ways to enable a file download to a user's computer when a specific HTML button is clicked

<button type="submit" class="myButton" onclick="window.open('test.txt')">Cash Machine</button> This code is not functioning as expected when clicked. The desired action is to prompt the download of test. ...

What is the process for creating a multi-word argument?

Is there a way to create multi-word arguments, such as reasons for bans or mutes? Currently, I am using args[2], args[3], args[4], args[5]... but this approach is limited and if nothing is written in those arguments, it will display "undefined". If you k ...

Remove any posts that have a date earlier than the current day

Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...

Is it possible to collapse and expand individual rows within the Material-UI DataGrid component?

Is there a way to create expand-collapse functionality for each row in Material-UI DataGrid? While I understand that we can achieve this with TableRow and manual rendering (Collapsible table), I am wondering if it is possible within the DataGrid component ...

Keypress Lagging woes: Latest Meteor Update

While I am updating a MongoDB model immediately upon keypress, it seems to lag behind due to the value being attached to that model. What would be the most effective way to update the model both on keypress and when refreshing the page so that the input re ...

Retrieving Array keys from PHP using jQuery

As a beginner in jQuery, I am eager to learn how to retrieve Array keys from a php file using jQuery. Currently, I have jQuery code set up to send input to file.php and execute a query on every keyup event. When file.php echoes the result, it looks somet ...

Is it common practice to include a variable in a function with the same name as the function itself?

Is it common practice to use a variable with the same name as the function within the function itself? const sum = function(arr) { let sum = 0; for(let i = 0; i < arr.length; i++) sum += arr[i]; return sum; }; Although this code runs s ...

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

Use jquery and json to automatically populate select fields based on specific threshold values when they are changed

Looking for guidance on using jQuery to dynamically populate four select fields based on a four-level JSON array for a webshop, depending on threshold values. I'm seeking help with dynamically changing the selects only if the given value is greater t ...

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem. Your assistance is greatly appreciated, João var inputs = Array.prototype.slice.call(document.querySele ...

Exploring THREE.Points, navigating through JSON data, and looping through different materials

After exporting some JSON data from Blender using three.js' addon, I am trying to extract colors from the materials associated with the geometry and convert them to "point" material types. Even though my console logs display that my .forEach function ...

Executing Puppeteer on a Cloud Platform and Transferring Its Output to JavaScript

Running a puppeteer script on Heroku has been successful with buildpacks sorted out. However, the plan is to eventually move it to a personal server and run it on a 5-minute loop. The main issue faced is encountering a timeout (H12 error on Heroku) when it ...

Why does my JSON variable contain "type" and "data" values instead of something else?

After using JSON.stringify() on my object to save it to a file, I noticed that one of the parameters does not have the expected string value assigned. Instead, it has a "type" and "data". Code: fs.writeFileSync('myjson.json', JSON.stringify(myjs ...

Sending data through AJAX

I am currently working on a calendar project. I want to include a description box next to the calendar, where additional information about an event will be displayed when a user clicks on a specific date. Here is what I have so far in terms of HTML/PHP: ...