0

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.

J.Doe
  • 41
  • 1
  • 11

0 Answers0