I am practicing MVC with jQuery and Ajax, I have created a Product with category, on storing product to List it passes CategoryID to server and on showing products list I need to show category name against category Id, for this I have created follwing function:
$.get('@Url.Action("GetList", "Product")', null, function (data) {
var table = "<table class=" + "mytable" + "><thead><tr><td>ID</td><td>Name</td><td>Description</td><td>Price</td><td>CategoryId</td></tr></thead><tbody>";
for (var key in data.pList) {
if (data.pList.hasOwnProperty(key)) {
var name ="default";
$.get('@Url.Action("GetCategoryName", "Product")', { categoryId: data.pList[key].CategoryId }, function (categoryDictionary) {
name = categoryDictionary.name;
});
table += "<tr>";
table += "<td>" + data.pList[key].Id + "</td>";
table += "<td>" + data.pList[key].Name + "</td>";
table += "<td>" + data.pList[key].Description + "</td>";
table += "<td>" + data.pList[key].Price + "</td>";
table += "<td>" + name + "</td>";
table += "</tr>";
}}
table += "</tbody></table>";
$("#div").append(table);
});
"name" still shows default, I read in many places that $.ajax is asynchronous, it can not return value like this
here, also, I am accessing callback from $.get, Is this nested call possible or what can be other solution?
Thanks in Advance.