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);
        /*-----------------------------------------------------------------*/
      }
    };


  });

How do I call the str variable value outside render function? What render function? You don't have a function called render in that code. You don't even use the word render in the code! — Quentin
– Quentin, Commented Jan 6, 2016 at 15:34
Also, please can you below code? — I have no idea what you are trying to say here. — Quentin
– Quentin, Commented Jan 6, 2016 at 15:35
without knowing anything about what app.getList actually does, I'm going to assume it's making an asynchronous request to a server, which means you can only use reply inside the callback function, though you can pass it to a different function, like you're doing with console.log(str). — user1106925
– user1106925, Commented Jan 6, 2016 at 15:35
My understanding is that app.getList is an object which takes function as a parameter? Yes. — Quentin
– Quentin, Commented Jan 6, 2016 at 15:35
but it is not returning anything — No, it isn't. Without seeing its definition we can't tell you what it is doing though. — Quentin
– Quentin, Commented Jan 6, 2016 at 15:36

gen_Eric · Accepted Answer · 2016-01-06 15:36:37Z

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.

answered Jan 6, 2016 at 15:36

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

VD27 Over a year ago

Hi - Thank you for taking time to answer. I've posted full code now. Does your response still apply to the code I posted?

gen_Eric Over a year ago

Yeah, it looks like app.getList is asynchronous, so what I said still applies. Actually... what is app (what is qlik)? What is app.getList()?

VD27 Over a year ago

qlik is interface loader for Qlik Sense API. I think app.getList() method gets data from the active app. Here is the documentation link: help.qlik.com/sense/2.1/en-US/developer/#../Subsystems/APIs/…

VD27 Over a year ago

Looking at the code. Please can you suggest the concepts I need to understand to fully understand the above code? I wanted to learn and not looking for short cut approach. My challenge is that I don't know what I don't know. Many thanks again.

gen_Eric Over a year ago

@DV27: Have a look here: help.qlik.com/sense/2.1/en-US/developer/#../Subsystems/APIs/… getList() takes a "callback" function as its 2nd parameter, it also returns a promise. That means that it's doing some work (possibly an AJAX call) in the background and will call your function at some later point in the future (like an event). When your function is called, that means getList() is finished, but it also means your render function had finished a long time ago. All work needs to be done in that callback.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related