List item returns null JSOM

Question

I'm new in developing sharepoint hosted apps, I need to return list items of list, it returns null. I've set permissions of list & web to full control. The following is app.js code

 var context = SP.ClientContext.get_current();
var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
var hostcontext = new SP.AppContextSite(context, hostUrl);
var web = hostcontext.get_web();
var lists = web.get_lists();

$(document).ready(function () {

    var scriptbase = hostUrl + "/_layouts/15/";
     $.getScript(scriptbase + 'SP.Runtime.js',
     function () {
     $.getScript(scriptbase + 'SP.js',
    function () {
     $.getScript(scriptbase + 'SP.RequestExecutor.js', execCrossDomainRequest);
     });
   });
});

function getQueryStringParameter(paramToRetrieve) {
  var params =
  document.URL.split("?")[1].split("&");
  var strParams = "";
  for (var i = 0; i < params.length; i = i + 1) {
      var singleParam = params[i].split("=");
      if (singleParam[0] == paramToRetrieve)
      return singleParam[1];
   }
}

function execCrossDomainRequest() {
  var context;
  var factory;
  var appContextSite;
  var mylist;
  context = new SP.ClientContext(appweburl);
  factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
  context.set_webRequestExecutorFactory(factory);
  appContextSite = new SP.AppContextSite(context, hostUrl);
  this.web = appContextSite.get_web();
  mylist = this.web.get_lists().getByTitle('test');
  var camlQuery = new SP.CamlQuery();
  camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
  var collListItem = mylist.getItems(camlQuery);
  context.load(mylist);
  context.load(collListItem);
  context.executeQueryAsync(
   Function.createDelegate(this, successHandler),
   Function.createDelegate(this, errorHandler)
  );

function successHandler() {
  var listItemInfo = '';
  var listItemEnumerator = collListItem.getEnumerator();
  while (listItemEnumerator.moveNext()) {
  var oListItem = listItemEnumerator.get_current();
  listItemInfo += "<li style='height: 20px;'>" + oListItem.get_item('Title') + "</li>";
  document.getElementById("message").innerHTML = '<h1>' + mylist.get_title() + '</h1><br />';
  document.getElementById("message").innerHTML += listItemInfo.toString();
  }
 }
 function errorHandler() {
   alert('Request failed. ');
 }

}

I'm using Napa in my development process, The result of above code is:

What is the problem?

Answer 1

Try declaring collListItem variable as global variable.
OR use it in execCrossDomainRequest() function in the following way

this.collListItem = mylist.getItems(camlQuery);

Answer 2

You need to declare your collListItem variable globally or use it as this.collListItem.

Refer below update functions where your local variable is used as this.collListItem.

function execCrossDomainRequest() {
    var context;
    var factory;
    var appContextSite;
    var mylist;
    context = new SP.ClientContext(appweburl);
    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostUrl);
    this.web = appContextSite.get_web();
    mylist = this.web.get_lists().getByTitle('test');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');

    // Here you need to use it as this variable
    //
    this.collListItem = mylist.getItems(camlQuery);

    context.load(mylist);

    // Even here
    //
    context.load(this.collListItem);

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

    function successHandler() {
        var listItemInfo = '';

        // Here too
        //
        var listItemEnumerator = this.collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            listItemInfo += "<li style='height: 20px;'>" + oListItem.get_item('Title') + "</li>";
            document.getElementById("message").innerHTML = '<h1>' + mylist.get_title() + '</h1><br />';
            document.getElementById("message").innerHTML += listItemInfo.toString();
        }
    }

    function errorHandler() {
        alert('Request failed. ');
    }

}