Self executing function inside of another

Question

'use strict';
$(function () {

 var MyValues = []; //--> for Data
  function myArraysValues() {
      $.ajax({
          url: '/AdminLte/TestArray',
          type: 'Get',
          dataType: 'json',
          data: { test: 'Client_Call' },

          success: function (data) {
              for (var i = 0; i < 8; i++) {
                  MyValues.push(data[i]);
              }
          },
          error: function (data) {
              alert("error");
          },
      })
      return MyValues;
  }

});
//alert(MyValues);
var salesChartData = {

    labels: MyLabels,
    datasets: [
        {
        label: "Erledigt",
        fillColor: "rgb(0, 102, 0)",
        strokeColor: "rgb(0, 102, 0)",
        pointColor: "rgb(0, 102, 0)",
        pointStrokeColor: "#66ff33",
        pointHighlightFill: "#66ff33",
        pointHighlightStroke: "rgb((0, 102, 0)",
        data: MyValues
        },

Here's my code. How could the myArraysValues() function be executed automatically? It is meant for the ChartJS (SalesChart). When add an alert(MyValues), it works, if i get ride of it, it won't Thanks

Just before the closing `}`, call the function: `$(function() { function myFunc() { ... } myFunc();` not sure the problem here. — freedomn-m, Mar 02 '16 at 15:40
What do you mean by "executed automatically"? Where are you even *trying* to execute it? Nowhere do you invoke that function. — David, Mar 02 '16 at 15:40
@David I think that *is* the question. Don't quote me on that though! — freedomn-m, Mar 02 '16 at 15:41
@badiiboukalane: Then just invoke it. `myArraysValues();` Are you really just asking how to *invoke a function*? — David, Mar 02 '16 at 15:46
If i add these too lines, it works well. i'am new to JS and i want to understand how to do it properly - MyValues= myArraysValues() - alert(MyValues); — badii boukalane, Mar 02 '16 at 15:53
@badiiboukalane: That's another problem entirely, and one which is addressed in detail by the linked question. `myArraysValues` doesn't actually return anything meaningful in this code. You have to respond to asynchronous code in callbacks. — David, Mar 02 '16 at 15:54

score 0 · Answer 1 · answered Mar 02 '16 at 15:41

I am not sure what you meant by execute automatically, If you meant to execute it when the page loads, you can invoke your custom code/method in the document ready event. But make sure to to execute the code to render your chart inside the ajax success handler because data from your asynchronous call will be available inside that and you can safely access that.

$(function () {

    getDataFromServerAndRenderChart();  

});

function getDataFromServerAndRenderChart()
{
    $.ajax({
          url: '/AdminLte/TestArray',
          type: 'Get',
          dataType: 'json',
          data: { test: 'Client_Call' },

          success: function (data) {
              var myValues=[];
              for (var i = 0; i < 8; i++) {
                  myValues.push(data[i]);
              }
              // use myValues array to initialize the chart HERE
          }
      })
}

Also, looks like you hard coded to execute your loop to run 8 times. I hope the data coming from server is an array with minimum 8 items so that your code won't crash.

It won't crash. It works actually only if i call the "MyValues" in an alert after the function itself. — badii boukalane, Mar 02 '16 at 15:50
ajax is asynchronous. So use it in the success event(when the response is available). — Shyju, Mar 02 '16 at 15:51

Self executing function inside of another

1 Answers1