Rest api returns undefined

Question

I am trying to get a random list item field from a sharepoint list. but the results return is undefined. The URL of the rest api is correct as i copy and past it directly to the browser it displays correct value.

Please see the code below

     window.myFunction = function() {
 var randomNumber = Math.floor(Math.random() * 320);  
alert('myFunction triggerred' + randomNumber);
//var listRandomURl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Wealoffortune')/items(4)?$select=Title&$top=1";
var listRandomURl = "https://mysite.sharepoint.com/sites/development2/_api/web/lists/GetByTitle('Wealoffortune')/items("+randomNumber+")/Actions";
alert(listRandomURl);

$.ajax({
   url: listRandomURl, 
   method: "GET",
   headers: { "Accept": "application/json; odata=verbose" },
   success: function (data) {
        alert(data.d.results);
   }
});
}


 
 fd.spRendered(function () {
 fd.control('Button1').onclick = "myFunction();";
});

Also i would like this to be shown in a label not in an alert how do i do that?

Answer 1

The REST API endpoint /items(<itemId>) returns the list item data in data.d and not in data.d.results.

So, try changing your success function like this:

success: function (data) {
    console.log(data.d);
}

Here's working example where I am fetching Title of list item and showing it in label on DOM:

<p> Title:
    <label id="lblActions"></label>
</p>

<script type="text/javascript">
    $(document).ready(function() {
        getListItem(_spPageContextInfo.webAbsoluteUrl, 1);
    });

    function getListItem(url, itemId) {
        $.ajax({
            url: url + "/_api/web/lists/getbytitle('TestList')/items(" + itemId + ")?$select=Title",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                if(data.d) {
                    $("#lblActions").text(data.d.Title);
                } else {
                    $("#lblActions").text("Item not found!");
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

Output:

Answer 2

Please, define a range of randomNumber variable, corresponding with the first ID number and last ID number of your list items. MDN Web Docs contains a good example to extract a integer number between min and max range:

//Example extracted from https://developer.mozilla.org/en-us/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);

  //The maximum is exclusive and the minimum is inclusive
  return Math.floor(Math.random() * (max - min) + min); 
}

Then, refactoring your approach, will be like this:

window.myFunction = function(min, max) {
 var randomNumber = getRandomInt(min,max);  
alert('myFunction triggerred' + randomNumber);
//var listRandomURl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Wealoffortune')/items(4)?$select=Title&$top=1";
var listRandomURl = "https://mysite.sharepoint.com/sites/development2/_api/web/lists/GetByTitle('Wealoffortune')/items("+randomNumber+")/Actions";
alert(listRandomURl);

$.ajax({
   url: listRandomURl, 
   method: "GET",
   headers: { "Accept": "application/json; odata=verbose" },
   success: function (data) {
        alert(data.d.results);
   }
});
}


 
 fd.spRendered(function () {
 fd.control('Button1').onclick = "myFunction();";
});