Accessing Sharepoint List with JavaScript

Question

I've been using the code here with a few modifications for my own code to access a list on my SharePoint site through JavaScript. This script is in the ASP.Net for the initiation form of a workflow on the site. I have seen lots of other answers for this but not any that have worked for me. I've inserted alerts into the code and found that it is running through the whole thing, but the issue is that when getList() function finishes running, the listItemInfo array is empty.

var listItemInfo = [];

window.onload = function()
{
    populateCatalystComboBox();
};

function populateCatalystComboBox()
{
    var catalystList = [];
    var index = 0;
    var select = document.getElementById("catalystSelections");

    getList();

    document.getElementById("testLabel").innerHTML = listItemInfo[0];
    alert ("Here");
    for (var i=0; i<listItemInfo.length; i++)
    {
        index = listItemInfo[i].indexOf("Chemical Type: ") + 14;
        if (listItemInfo[i].substring(index) == "Catalyst")
        {
            catalystList.push(listItemInfo[i]);
        }
    }

    catalystList.push("Test 3");
    catalystList.push("Test 4");

    //document.getElementById("testLabel").innerHTML = (catalystList.toString());

    for (i=0; i<catalystList.length; i++)
    {
        var catalyst = catalystList[i];
        var newOption = document.createElement("option");
        newOption.textContent = catalyst;
        newOption.value = catalyst;
        select.appendChild(newOption);
    }
}

function getList()
{
    var clientContext = new SP.ClientContext("https://____.sharepoint.com/sites/______/");
    var oList = clientContext.get_web().get_lists().getByTitle('ChemicalsTable');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo.push ('\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body'));
    }

    alert(listItemInfo.toString());
}

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

The alert "Here" does display and the innerHTML = listItemInfo[0] becomes "undefined".

UPDATE: I've found that when I insert an alert(oListItem.get_id()); in onQuerySucceeded(sender, args) in the while loop it outputs the correct data. However, when I put in alert(oListItem.get_item('ChemicalName'));, the alert doesn't pop up. It is instead popping up with an alert that the column name (ChemicalName) doesn't exist. The problem is, it does. The URL is the one for my site, it paths to Site Contents->Lists->Chemicals Table as it should where there is a column named ChemicalName.

Answer 1

You tried to run jsom without loaded sp.js

try to call sp.js before running any jsom function as the following

 $(document).ready(function () {     
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', prepareTables);
    });

so remove

window.onload = function()
{
    populateCatalystComboBox();
};

and replace it with

$(document).ready(function () {

            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', prepareTables);
            populateCatalystComboBox();
        });

Answer 2

Please try with using defered and promise on function getList() as it is asyn call, you can refer link for using defered.SharePoint JavaScript client object model is asynchronous. However, sometimes we want to process things in synchronous way. This can be done by using JavaScript call backs and deferreds/Promises.