REST returns List Items but Response is blank in SP2013

Question

I am SOOOO frustrated ...

I have a jquery function to grab list data and when I log "data" I see the full {d} with a {results} holding all the list items. But when I run it through an $.each function to get a string I can return, when I log rsp, the debugger says "an empty string."

Here is my function:

function get_news(){
    var rsp = '';
    $.ajax({
        url: "http://edrdbdev/_api/web/lists/GetByTitle('Latest News')/items",
        type: "GET",
        headers: { "accept" : "application/json;odata=verbose" },
        success: function(data){
            console.log(data);
            $.each(data.d.results, function(index, item){
                rsp +=  "<p>" + item.Title + "</p>"
            });
        },
        error: function(error){
            rsp = JSON.stringify(error);
        }
    });

    console.log(rsp);
    return rsp;
} // end get_props function

I am going crazy and would greatly appreciate any advice or corrections. Thanks in advance.

Answer 1

$.ajax perform an asynchronous HTTP (Ajax) request. That means sending the request (or rather receiving the response) is taken out of the normal execution flow.

In your example, return rsp is executed before the function you passed as success callback was even called.

Solutions

There are basically two ways how to solve this:

• Make the AJAX call synchronous.
• Restructure your code to work properly with callbacks.

Please refer How to return the response from an AJAX call? for a more details

Below is demonstrated the modified version with callback usage:

function get_news(result){
    var rsp = '';
    $.ajax({
        url: "http://edrdbdev/_api/web/lists/GetByTitle('Latest News')/items",
        type: "GET",
        headers: { "accept" : "application/json;odata=verbose" },
        success: function(data){
            console.log(data);
            $.each(data.d.results, function(index, item){
                rsp +=  "<p>" + item.Title + "</p>"
            });
            result(rsp);    
        },
        error: function(error){
            result(JSON.stringify(error));
        }
    });    
} 



//Usage
get_news(function(content){
    console.log(content);
});