ClientContext showing data as undefined

Question

I had some code similar to this one for getting data from property bag.

However, I am getting some error that my variables are undefined. Even site and web are shown as undefined.

What could be the issue?

P.S: My variables usrname and psword are defined globally.

My code is below:

function getPropertyValues(){
    var curSite = getCurrentSite();
    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var propertyBag = web.get_allProperties();

    context.load(propertyBag );
    context.executeQueryAsync(Function.createDelegate(this, this.getWebPropertiesSucceeded), Function.createDelegate(this, this.getWebPropertiesFailed));
}

function getWebPropertiesSucceeded() {
    usrname = propertyBag.get_fieldValues()["ClientId"];
    psword = propertyBag.get_fieldValues()["ClientSecret"];
}

function getWebPropertiesFailed(args, sender)
{         //handle errors here   }

Answer 1

While JSOM is still indeed supported, Microsoft is not working actively on JSOM and is pushing new change via RESTful endpoints.

The ability to fetch property bag value is supported via REST API. You can do that as below for your code using jQuery, but you can use any other library that your prefer :

$.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/allproperties?$select=ClientId,ClientSecret",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            usrname = data.d.ClientId;
            psword = data.d.ClientSecret;
        }
    });

Answer 2

You can get web property bag using JavaScript object model. But make sure SP.js file is loaded first on your SharePoint page.

Try using below Code:

//wait until client object model dependencies are loaded before executing our code
ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js");

var webProperties;

function getWebProperties() {
    var clientContext = new SP.ClientContext.get_current();
    webProperties = clientContext.get_web().get_allProperties();
    clientContext.load(webProperties);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.getWebPropertiesSucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function getWebPropertiesSucceeded() {
    //returns an object with all properties.  
    var allProps = webProperties.get_fieldValues();

    var clientId = "";

    //make sure the property is there before using it.
    if(webProperties.get_fieldValues()["ClientId"] != undefined)
    {
        var clientId = webProperties.get_fieldValues()["ClientId"];
    }
    console.log(clientId);
}

function onQueryFailed(args, sender)
{
     //handle errors here
}

Source: Accessing the web property bag with JavaScript