How do I get an image from an Image Library app using the SharePoint JSOM?

Question

I am trying to write a SharePoint web part for an on-line SharePoint-hosted site. I have looked around but can't find more than how to access a basic list. I need to access a list created by the Image Libary app, but when I look at the list columns in my admin UI, I can only see text columns, and I have only figured out how to access these text columns in my js code:"

var oneList = this.web.get_lists().getByTitle("RotatingBannerImages");
var query = new SP.CamlQuery();
this.listItems = oneList.getItems(query);
context.load(listItems);

context.executeQueryAsync(
    Function.createDelegate(this, successHandler),
    Function.createDelegate(this, errorHandler)
);

function successHandler() {
    var itemEnum = listItems.getEnumerator();
    while (itemEnum.moveNext()) {
        var item = itemEnum.get_current();
        console.log(item.get_item("Title")); // Returns null on image list.
    }
}

The expression item.get_item("Title") returns a list item title when I access a plain text list, which I used to establish my API code before moving on the Image Library list. Nearly everything I try in the debugger returns an object, which needs another round of method calls just to inspect it.

Answer 1

There are at least 3 options how to access List Item properties via SharePoint JSOM.

The following example demonstrates how to access SP.ListItem.id property:

var ctx = SP.ClientContext.get_current();
var web = ctx.get_web();
var list = web.get_lists().getByTitle("Images");
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
ctx.load(items);

ctx.executeQueryAsync(
    function() {

       for(var i = 0; i < items.get_count(); i++) {
           var item = items.getItemAtIndex(i);    

           console.log(item.get_item("ID")); // 1st Option 
           console.log(item.get_fieldValues().ID); // 2nd Option
           console.log(item.get_id()); // 3d Option
       }
    },
    function(sendera,args){
       console.log(args.get_message());
    }
);

Option 1

Using SP.ListItem.item property to get or sets the specified field value, for example to return image url of list item in Images library:

var imageUrl = item.get_item("FileRef")

Option 2

SP.ListItem.fieldValues property stores a collection of key/value pairs containing the names and values for the fields of the list item, for example:

var imageUrl = item.get_fieldValues().FileRef;

or

var imageUrl = item.get_fieldValues()['FileRef'];

Option 3

SP.ListItem object exposes some properties like SP.ListItem.id property, for example:

var itemId = item.get_id();

Answer 2

You must load File details, here the code

var web = context.get_web();
var list = web.get_lists().getByTitle("Pictures");

var query = new SP.CamlQuery();
this.listItems = list.getItems(query);
context.load(listItems);

context.executeQueryAsync(
    Function.createDelegate(this, successHandler),
    Function.createDelegate(this, errorHandler)
);

function successHandler() {
    var itemEnum = listItems.getEnumerator();
    while (itemEnum.moveNext()) {
        var item = itemEnum.get_current();
        this.fileImg = item.get_file();
        context.load(fileImg);

        context.executeQueryAsync(
            Function.createDelegate(this, successFile),
            Function.createDelegate(this, errorHandler)
        );
    }
}

function successFile() {
    console.log(fileImg.get_name());
    console.log(fileImg.get_serverRelativeUrl());
}

function errorHandler()
{
    console.log("Error");
}

Anyway if you can use jquery I suggest you to use REST as follow; as you can see you write less code;

var urlAll = "http://mysite/_api/web/lists/getbytitle('RotatingBannerImages')/items?$expand=File"

$.ajax({
    url : urlAll,
    headers : {
        'Content-Type': 'application/json;odata=verbose'
    },
    type: 'GET',
    success: function(data, textStatus, jqXHR) {
        var files  = data.d.results;
        files.forEach(function(item){
            console.log(item.File.ServerRelativeUrl);
            console.log(item.File.Name);
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});