Function within function in JavaScript - Need to understand this code:

Question

I have below code within a function called render. How do I call the str variable value outside render function?

Also, please can you explain below code? I'm fairly new to js and head is hurting looking at the function calls having functions as a parameter.

My understanding is that app.getList is an object which takes function as a parameter? but it is not returning anything. Sorry, I'm lost here.

app.getList("FieldList", function(reply){
    var str = "";
    $.each(reply.qFieldList.qItems, function(index, value) {
        str +=  value.qName + ' ';
    });
    console.log(str);
});

Full Code:

 define(["jquery", //mashup and extension interface "qlik", //add stylesheet "text!./css/mystyle.css", "client.utils/state", "client.utils/routing" ], function($, qlik, cssContent, clientState, clientRedirect) { /*-----------------------------------------------------------------*/ // function redirect (sheetId){ // clientRedirect.goToSheet(sheetId, Object.keys(clientState.States)[clientState.state]) // } /*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/ var render = function($elem, layout) { var html = '', app = qlik.currApp(); //get list of tab objects and insert into div app.getAppObjectList('sheet', function(arrayitem) { //for each sheet in the app, create a list item $.each(arrayitem.qAppObjectList.qItems, function(myindex, myvalue) { //include the sheet id as the list item id to be used as a reference for active sheet html += '<li id="' + myvalue.qInfo.qId + '">'; // onClick="redirect(' + value.qInfo.qId + '); //wrap anchor tag to be used by bootstrap styling html += '<a>'; //give the link the same name as the sheet html += myvalue.qData.title; html += '</a>'; html += '</li>'; }); html += '</ul></div>'; html += "<button id='myButton'> Click Me!! </button>"; console.log(arrayitem.qAppObjectList); console.log(html); //insert html into the extension object return $elem.html(html); }); /* Test Code Start from here */ app.getList("FieldList", function(reply) { var str = ""; $.each(reply.qFieldList.qItems, function(key, value) { str += value.qName + ' '; }); console.log(str); }); }; /*-----------------------------------------------------------------*/ return { /*-----------------------------------------------------------------*/ paint: function($element, layout) { console.count(); /*-----------------------------------------------------------------*/ $(function() { $element.html("#myButton").click(function() { // for(var mynum = 1; mynum <= 5; mynum++){ // alert('button test' + mynum); // }; }); }); /*-----------------------------------------------------------------*/ render($element, layout); /*-----------------------------------------------------------------*/ } }; }); 

Answer 1

app.getList is probably asynchronous (meaning it runs in the background). The function you've passed to it is a callback . That function will be ran at some point in the future, once the AJAX call (or whatever asynchronous method is ran) is done.

Your callback is passed reply , which is the "return" value from getList() . You cannot access str from outside of this function. You need to do whatever code with reply and/or str in that function only.