Query list items and display in client webpart..

Question

I am using the code below to display list items in clientwebpart but getting errors.Below is the code written in js file..What is wrong with the code??
Error:javaScript runtime error: Unable to set property 'innerText' of undefined or null reference 
'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var web;
var spHostUrl;
var parentcontext;
spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
parentcontext = new SP.AppContextSite(context, spHostUrl);
web = parentcontext.get_web();
var list = web.get_lists().getByTitle("ListsTask");
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("");
this.listItems = list.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
    Function.createDelegate(this, this.onQueryFailed));
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    getUserName();
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
function getQueryStringParameter(urlParameterKey) {
    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] == urlParameterKey)
            return decodeURIComponent(singleParam[1]);
    function onQuerySucceeded() {
        $("#results").empty();
        var listInfo = '';
        var listEnumerator = listItems.getEnumerator();
        listInfo += "<table><tr><th>Id</th><th>Title</th></tr>";
        while (listEnumerator.moveNext()) {
            var listItem = listEnumerator.get_current();
            listInfo += '<tr><td>' + listItem.get_item('ID') + '</td>'
                + '<td>' + listItem.get_item('Title') + '</td>'
                + '</tr>\n';
        listInfo += '</table>';
        $("#results").html(listInfo);
    function onQueryFailed(sender, args) {
        $("#results").empty();
        $("#results").text('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());

Answer 1

HI,
I have modified your code.
'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var web;
var spHostUrl;
var parentcontext;
spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
parentcontext = new SP.AppContextSite(context, spHostUrl);
web = parentcontext.get_web();
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    getUserName();
    getitems();
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
function getitems()
    var list = web.get_lists().getByTitle("ListsTask");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("");
    this.listItems = list.getItems(camlQuery);
    context.load(listItems);
    context.executeQueryAsync(onQuerySucceeded1, onQueryFailed1);
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
function getQueryStringParameter(urlParameterKey) {
    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] == urlParameterKey)
            return decodeURIComponent(singleParam[1]);
    function onQuerySucceeded1() {
        $("#results").empty();
        var listInfo = '';
        var listEnumerator = listItems.getEnumerator();
        listInfo += "<table><tr><th>Id</th><th>Title</th></tr>";
        while (listEnumerator.moveNext()) {
            var listItem = listEnumerator.get_current();
            listInfo += '<tr><td>' + listItem.get_item('ID') + '</td>'
                + '<td>' + listItem.get_item('Title') + '</td>'
                + '</tr>\n';
        listInfo += '</table>';
        $("#results").html(listInfo);
    function onQueryFailed1(sender, args) {
        $("#results").empty();
        $("#results").text('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());
But still not able to get list items, i m finding soultion.
Thanks
varinder