如何从SharePoint列表中使用JavaScript显式加载列

Question

The following code works perfect

$(document).ready(function () {
    var scriptbase = "/_layouts/15/";
    $.getScript(scriptbase + "SP.Runtime.js");
    ExecuteOrDelayUntilScriptLoaded(ready, "SP.Runtime.js");
})

function ready() {
    var scriptbase = "/_layouts/15/";
    $.getScript(scriptbase + "SP.js", function(){
        var d = $.Deferred();
        var path = document.location.href
        console.log(path);          
        var context = new SP.ClientContext('http://myserver/centrodeprocesos/procesos');
        var oList = context.get_web().get_lists().getByTitle('ImagenesDeFondo');
        var camlQuery = SP.CamlQuery.createAllItemsQuery();
        var collTermListItem = oList.getItems(camlQuery);
        context.load(collTermListItem);         
        var o = {d: d, collTermListItem:collTermListItem};
        context.executeQueryAsync(
            Function.createDelegate(o, onQuerySucceeded),
            Function.createDelegate(o, onQueryFailed));
        return d.promise();
    });   
}


function onQuerySucceeded()
{
    var listItemEnumerator = this.collTermListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        console.log(oListItem.get_item('Title'));
        //console.log(oListItem.get_item('Url'));
    }
    this.d.resolve(oListItem);
}

function onQueryFailed() {
    this.d.reject("something bad happened");
}

However I need to also print the URL which is a field in the list

$(document).ready(function () {
    var scriptbase = "/_layouts/15/";
    $.getScript(scriptbase + "SP.Runtime.js");
    ExecuteOrDelayUntilScriptLoaded(ready, "SP.Runtime.js");
})

function ready() {
    var scriptbase = "/_layouts/15/";
    $.getScript(scriptbase + "SP.js", function(){
        var d = $.Deferred();
        var path = document.location.href
        console.log(path);          
        var context = new SP.ClientContext('http://myserver/centrodeprocesos/procesos');
        var oList = context.get_web().get_lists().getByTitle('ImagenesDeFondo');
        var camlQuery = SP.CamlQuery.createAllItemsQuery();
        var collTermListItem = oList.getItems(camlQuery);
        context.load(collTermListItem, 'Include(Url)');         
        var o = {d: d, collTermListItem:collTermListItem};
        context.executeQueryAsync(
            Function.createDelegate(o, onQuerySucceeded),
            Function.createDelegate(o, onQueryFailed));
        return d.promise();
    });   
}


function onQuerySucceeded()
{
    var listItemEnumerator = this.collTermListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        console.log(oListItem.get_item('Title'));
        console.log(oListItem.get_item('Url'));
    }
    this.d.resolve(oListItem);
}

function onQueryFailed() {
    this.d.reject("something bad happened");
}

The error is the property has not been initialized or need to be requested explicitly.

Answer 1

SP.ClientContext.load method allows to specify which properties have to be requested. In the example you have provided, only Url property is requested:

context.load(collTermListItem, 'Include(Url)');

but two properties are excepted as a result:

console.log(oListItem.get_item('Title'));  //<--this property is not initialized
console.log(oListItem.get_item('Url'));

So, the solution would be to request both properties:

context.load(collTermListItem, 'Include(Title,Url)'); 

Example

The following example demonstrates how to retrieve Title and Url properties from Images library:

var listTitle = 'Images';

var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(listTitle);   
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
ctx.load(items,'Include(Title,FileRef)');       

ctx.executeQueryAsync(
    function () { 
        for(var i = 0; i < items.get_count();i++) {
            var item = items.getItemAtIndex(i);
            console.log(item.get_item('Title'));
            console.log(item.get_item('FileRef'));       
        }
    },
    function (sender, args) { 
        //Error handling goes here..
    });