Not able to display the data Using ajax?

user_11700630 0
Viewed 95

Hi I am new to php and ajax I wrote an select query in php and pushed the results into an array and I am trying to display the results in the table format using ajax for that I had wrote an ajax call as follows

$.ajax({
        type:"POST",
        url:"propage.php",
        dataType:"json",
        data:{
          action:"addFilter",
           pid:pid,
           
         },
        success : function(filres)
        { 
          
          if(filres.status==1)
          {
            { $.each(filres.data, function(i, row) { 
              var row = "<tr>"; 
              row += "<td>" + row.filter_id + "</td>"; 
              row += "<td>" + row.name + "</td>";
              row += "<td>" + row.filter + "</td>";
              row +="<td>"<a href=>Delete</a>"</td>";
              row += "</tr>"; 
              $("#table_filter").append(row); 
            }); 
          }
        }
          else
          {
            $("#get_msg").html("<p style=\'color:red;font-weight:bolder;\'>"+filres.data+"</p>");
          }
        }
    
      });
      return false;
    });

But in the table I am getting data as undefined but when I click on the button I am getting the data in the network tab as follows

data: [{filter_id: "1", name: "ss", filter: "SOCIAL SECURITY"},…]

Can anyone help me out for this?

jquery
2 Answers

You can use forEach function to do this.

The reason its not working is that have some syntax error in your td item where you are using a element also you there are some extra brackets data as required to. Also you are using same var row to get data from .each and assign to your table as well.

Run snippet below to see it working.

//Your data
let filres = {
  data: [{
    filter_id: "1",
    name: "ss",
    filter: "SOCIAL SECURITY"
  }]
}

//Foreach function
filres.data.forEach(function(item) {
  var row = "<tr>";
  row += "<td>" + item.filter_id + "</td>";
  row += "<td>" + item.name + "</td>";
  row += "<td>" + item.filter + "</td>";
  row += "<td><a href=>Delete</a></td>";
  row += "</tr>";
  $("#table_filter").append(row);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_filter">

</div>

Change your ajax to this below all should work fine.

$.ajax({
  type: "POST",
  url: "propage.php",
  dataType: "json",
  data: {
    action: "addFilter",
    pid: pid,
  },
  success: function(filres) {
    if (filres.status == 1) {
        //Foreach function
          filres.data.forEach(function(item) {
            var row = "<tr>";
            row += "<td>" + item.filter_id + "</td>";
            row += "<td>" + item.name + "</td>";
            row += "<td>" + item.filter + "</td>";
            row += "<td><a href=>Delete</a></td>";
            row += "</tr>";
            $("#table_filter").append(row);
          })
       } else {
        $("#get_msg").html("<p style=\'color:red;font-weight:bolder;\'>" + filres.data + "</p>");
      }
   }
});
user_136690480

You are overwriting the "row" on each iteration, so when you try to get the data it is no longer there, returning that "undefined". Try changing the "var row" to another variable name:

$.each(filres.data, function(i, row) { 
 var row = "<tr>" // <- Here;
user_110035450
Related