how to stop first function get json till second function getjson return data

Question

Hi Guys I have a problem to make a accordion menu (Nested) in Apache Cordova. I have to function with two getjson to get categories and sub categories. Middle of first function i call second function to get sub Categories,But Second Function Did not return my favorite string that is contains htmlSubCategories and it returns undefined value

     //Function 1
  var Categoriesdata = [];
function getCategories()
{
    var htmlCategories = "";
    $.getJSON('http://example.com/Categories', null, function (Categoriesdata) {
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            {
                htmlCategories += "<li>";
                htmlCategories += "<a href='#'> " + Categoriesdata[i].Text + "</a>";
                htmlCategories += getCategoriesRev(Categoriesdata[i].Id);
                htmlCategories += "</li>";
            }
       }
            $(".Categories").html(htmlCategories);  
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    var htmlSubCategories = "";
    $.getJSON('http://example.com/CategoriesRev', { id: Id }, function (CategoriesdataRev) {

        if (CategoriesdataRev.length > 0)
        { 
            for (var j = 0; j < CategoriesdataRev.length; j++) {
                htmlSubCategories += "<li>";
                htmlSubCategories += "<a href='#'> " + CategoriesdataRev[j].Text + "</a>";
                htmlSubCategories += getCategoriesRev(CategoriesdataRev[j].Id);
                htmlSubCategories += "</li>";
            }
            htmlSubCategories = "<ul class='submenu'>" + htmlSubCategories + "</ul>";

        }
  return htmlSubCategories;
    });

}

Have you tried adding `.always(data)` at the end of 2nd function and returning the value inside it? This way, you should be able to return data when it is ready. — vahdet, Dec 26 '16 at 11:03
what is this part: `$.getJSON('CategoriesRev'` supposed to do? — mike510a, Dec 26 '16 at 11:05
Your both function where calling same data and you haven't added any different elements to set data in your app, you are calling the same function `getCategoriesRev` into it with `i` which is not defined in your second function! Correct your own code first and then let us know if it is working or not. — Kirankumar Dafda, Dec 26 '16 at 11:41
@Alirezaunixp I mean something like shown here: http://stackoverflow.com/a/26981220/4636715 Your $.getJSON have the same functionality as $.ajax with type GET shown there — vahdet, Dec 26 '16 at 13:38
@Alirezaunixp You can use the callbacks, see my answer http://stackoverflow.com/a/40403624/4361743 — karman, Dec 26 '16 at 14:01

score 0 · Answer 1 · answered Dec 26 '16 at 12:32

AJAX requests are asynchronous, meaning the second call will not be finished by the time it returns and htmlSubCategories will still be an empty string.

In JavaScript, you write asynchronous code using callbacks or Promises. Luckily, AJAX requests done with jQuery return you a Promise which you can use.

I would also advise against one AJAX call for each sub category you have. I would only call it once to get all, then filter with JavaScript.

But working with what you have now, the following solution uses simple jQuery:

//Function 1
function getCategories()
{
    $.getJSON('http://example.com/Categories', function (Categoriesdata) {
        var $categories = $('.Categories').html('');
        for (var i = 0; i < Categoriesdata.length ; i++)
        {
            $categories
                .append('<li>'
                          + '<a href="#">'
                              + Categoriesdata[i].Text
                          + '</a>'
                          + '<ul id="' + Categoriesdata[i].Id + '"></ul>'
                      + '</li>');

            getCategoriesRev(Categoriesdata[i].Id);
        }
    });
}

  //Function 2
function getCategoriesRev(Id)
{
    $.getJSON('http://example.com/CategoriesRev', { id: Id },
        function(CategoriesdataRev) {
            var $subCategoryUl = $('.Categories').find('ul#' + Id);
            if (CategoriesdataRev.length > 0)
            { 
                for (var i = 0; i < CategoriesdataRev.length; i++)
                {
                    $subCategoryUl
                        .addClass('submenu')
                        .append('<li>'
                                  + '<a href="#"> '
                                      + CategoriesdataRev[i].Text
                                  + '</a>'
                              + '</li>');
                }
            }
            else
                $subCategoryUl.remove();
        });
}

Correct, both functions are `void`. However, your `$('.Categories')` element should be correctly populated — rabelloo, Dec 26 '16 at 15:15

how to stop first function get json till second function getjson return data

1 Answers1