How to get PublishingRollupImage for page in Page library with REST and jQuery?

Question

I have a repeater in a user control and I databind it in code behind like so:

                var items = list.Items.Cast<SPListItem>()
                .OrderByDescending(a => a[SPBuiltInFieldId.Modified])
                .Where(a => a.HasPublishedVersion)
                .Select(a => new
                {
                    Title = a.Title,
                    Comments = a[FieldNames.Comments],
                    RollupImage = a[FieldNames.RollupImage],
                    PageContent = a[FieldNames.PageContent],
                    NewsDate = a[SPBuiltInFieldId.Modified],
                    Url = SPUtility.ConcatUrls(web.Url, a.Url)
                }).ToList().Take(maxItems);


                rptNews.DataSource = items;
                rptNews.DataBind();

I now try to do the same but with REST and jQuery instead, I got it working for normal text fields but when I try to get the URL and RollupImage I get into trouble ("undefined").

$("#<%=lblReadMore.ClientID%>").click(function () {
    var displayedItems = $(".news-item").length;
    var url = L_Menu_BaseUrl + "/content/_vti_bin/ListData.svc/Pages?$skip=" + displayedItems + "&top=3?$orderby=Modified";

    $.getJSON(url,
     function (data) {
         $.each(data.d.results,
          function (i, result) {
              $('<div class="news-item noindex"><table><tr><td class="news-item-image">' + result.PublishingRollupImage + '</td><td class="news-item-content"><h2>' + result.Title + '</h2><p>' + result.Comments + '<a class="moreButton" href="' + result.Url + '">Read More</a></p></td></tr></table></div>').appendTo("#HomePageNews");
          }
         );
     });

});

The internal name for rollupimage is PublishingRollupImage but when I use this I get undefined.

Also, in the C# code I filter on a.HasPublishedVersion, is this taken care of automatically with the REST API or do I need a check for this?

Thanks in advance.

Edit: Updated code:

function GetImage(id) {
    var ctx = new SP.ClientContext("/content/");
    var targetList = ctx.get_web().get_lists().getByTitle('Pages');
    targetListItem = targetList.getItemById(id);
    ctx.load(targetListItem, 'PublishingRollupImage');
    ctx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
    alert(targetListItem.get_item('PublishingRollupImage'));
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function LoadAllNews() {
    $('.news-item').remove();
    var siteUrl = L_Menu_BaseUrl + "/content/";
    var listUrl = siteUrl + "_vti_bin/ListData.svc/Pages?$filter=ApprovalStatus eq '0'";

    $.getJSON(listUrl,
     function (data) {
         $.each(data.d.results,
          function (i, result) {
            GetImage(result.Id);
              $('<div class="news-item noindex"><table><tr><td class="news-item-image"></td><td class="news-item-content"><h2>' + result.Title + '</h2><p>' + result.Comments + '<a class="moreButton" href="' + result.Path + "/" + result.Name + '"> Read More</a></p></td></tr></table></div>').appendTo("#HomePageNews");
          }
         );
     });
}

Answer 1

Would it be possible to use the Client Object Model?

This works for me:

var ctx = new SP.ClientContext();
var items = ctx.get_web().get_lists().getByTitle('Pages').getItems(new SP.CamlQuery());
ctx.load(items);
ctx.executeQueryAsync(function() {
  // Get the first items rollup image, just as an example
  var rollupImage = items.getItemAtIndex(0).get_item('PublishingRollupImage');
  console.log(rollupImage);
});

Answer 2

It does not seem possible to retrieve Publishing Image fields using SharePoint REST List Item endpoint.

But there is a workaround, publishing fields could be retrieved using ListItem.FieldValuesAsHtml property via SharePoint REST endpoint as demonstrated below.

How to retrieve Publishing fields using SharePoint 2013 REST

function getJson(endpointUri, success, error) 
{    
    $.ajax({       
       url: endpointUri,   
       type: "GET",   
       processData: false,  
       contentType: "application/json;odata=verbose",
       headers: {   
          "Accept": "application/json;odata=verbose"
       }, 
       success: success,
       error: error
    });
}


function getPublishingPage(webUrl,listName,listItemId,publishingProperties, success, failure) 
{
    var itemUri =  webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + listItemId + ")";  
    getJson(itemUri,
       function(data){
           var pageItem = data.d;

           var selectProperties = [];  
           for(var idx in publishingProperties){
               if(!pageItem.hasOwnProperty(publishingProperties[idx])){
                   selectProperties.push(publishingProperties[idx]);
               }
           }
           if(selectProperties.length > 0) {
              //construct an additional query 
              var query = '/FieldValuesAsHtml?$select=' + selectProperties.join(',');
              var endpointUri = pageItem['__metadata'].uri + query;
              getJson(endpointUri,
                 function(data){
                    for(var property in data.d){
                       if(property == "__metadata") continue; 
                       pageItem[property] = data.d[property];   
                    }
                    success(pageItem);  
                 },
                 failure);
           } 
           else {
              success(pageItem);
           }   
        },
       failure);
}

Usage

The following example demonstrates how to retrieve page fields including publishing fields, such as PublishingRollupImage:

getPublishingPage(_spPageContextInfo.webAbsoluteUrl,'Pages',3,['PublishingRollupImage','PublishingPageImage'],printPageDetails,logError);

function printPageDetails(pageItem)
{
    console.log('Page Content: ' + pageItem.PublishingPageContent);
    console.log('Page Title: ' + pageItem.Title);
    console.log('Page Rollup Image ' + pageItem.PublishingRollupImage);
}

function logError(error){
    console.log(JSON.stringify(error));
}