Displaying List returned from ASP.NET MVC Controller towards AJAX

Question

So I am really not that good with FRONT-END side especially jQuery. BACK-END side I am retrieving a list that is executed from a Stored Procedure and I need to send back that list and display " APPEND " the list in an existing table.

BACK-END Action:

[HttpPost]
    public JsonResult Search(string RefAO)
    {

        BD_MarcheEntities ctx = new BD_MarcheEntities();
        var list = ctx.Bilan_Lot(RefAO).ToList<Bilan_Lot_Result>();
        if(list != null)
        {

            //var li = JsonConvert.SerializeObject(list);
            return Json(list, JsonRequestBehavior.AllowGet);

        }
        else
        {
            return Json("fail");
        }
    }

The jQuery/AJAX function:

$(document).on("click","#bt_search",function (e) {
alert("ff");
        $.ajax({
                    url : '/Lots/Search',
                    type : 'POST',
                    data : {  RefAO : $("#RefAppelOffre").val()  },
                    success : function(list) {
                        if(list == "fail"){

                            alert('error');

                        }
                        else{


                            $.each(list,function(){

                               $("#tab tbody").append("<tr>" +
                                                            "<td>" + list.Ref_Lot + "</td>" +
                                                            "<td>" + list.Titre + "</td>" +
                                                            "<td>" + list.TotalLotTTC + "</td>" +
                                                            "<td>" + list.NombreConcurrent + "</td>" +
                                                            "<td>" + list.NombreArticle + "</td>" +
                                                        "</tr>");
                            })

                        }//Fermeture Else
                    }//Fermeture Success

               })//fermeture ajax        
   })

Someone please explain to me what I am doing wrong here!?

this it displays

UPDATE : This what I am getting when using the ( console.log )

this is actually the row I am expecting to be added to the table

Answer 1

Assuming your server is actually returning an array of objects, that should probably be:

...
                        $.each(list,function( index, value ){

                           $("#tab tbody").append("<tr>" +
                                                        "<td>" + value.Ref_Lot + "</td>" +
...

If this does not work, you should provide a console.log of list before you enter the loop.

Answer 2

Try this

success : function(list) {
    if(list == "fail"){
        alert('error');
    }
    else{
        $.each(list,function(i){
           $("#tab tbody").append(
                "<tr>" +
                    "<td>" + list[i].Ref_Lot + "</td>" +
                    "<td>" + list[i].Titre + "</td>" +
                    "<td>" + list[i].TotalLotTTC + "</td>" +
                    "<td>" + list[i].NombreConcurrent + "</td>" +
                    "<td>" + list[i].NombreArticle + "</td>" +
                "</tr>");
        })
    }//Fermeture Else
}//Fermeture Success