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
– vahdet, Commented Dec 26, 2016 at 11:03
what is this part: $.getJSON('CategoriesRev' supposed to do? — mike510a
– mike510a, Commented Dec 26, 2016 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
– Kirankumar Dafda, Commented Dec 26, 2016 at 11:41

user5529144 · Accepted Answer · 2016-12-26 12:32:29Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related