How To Display Ajax Response Value In Column Format Individual?

I am getting only 3 users value from PHP using AJAX and that value I have to display in column format. I have tried below code but It is not displaying. I am getting output like al

Solution 1:

try this!

success: function(response) {
  $.each(response, function (i, item) {
    var fname= response[i]['fname'];
    var fname1= response['data'][0]['fname'];
    var fname2= response['data']['fname'];
    alert (fname);
    alert (fname1);
    alert (fname2);
  });
}

Solution 2:

EDIT: based on your HTML, here's how I would do it.

success: function(response) {
    let repeatableDiv = "";

    response.data.forEach(val => {
    repeatableDiv += "<divclass='box-set'><spanclass='compare_userpic'id='response_profile_pic'><imgsrc='images/profile/" + val.profile_pic + "'alt='' /></span><ulclass='point_compare'><li><h2>" + val.fName + "</h2></li><li><h3>" + val.lName + "</h3></li></ul></div>"      
  })

  $(".compare_result").innerHTML = repeatableDiv 

Then clean out all of the HTML that you commented out, and it should work.

Solution 3:

It must be work. Do it:

<div id="container"></div>

$(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: 'POST',
                url: 'includes/process.php',
                data: $('#search-form').serialize(),
                dataType: 'json',
                success: function(response) {                     

                    var container = document.getElementById('container');

                    for (key in response){
                        var div=document.createElement('div');
                        var img=document.createElement('img');
                        var flab=document.createElement('label');
                        var llab=document.createElement('label');
                        var fcaption=document.createElement('h2');
                        var lcaption=document.createElement('h2');

                        img.setAttribute('src','images/profile/' + response[data].profile_pic);    
                        img.setAttribute('alt','');    
                        flab.innerText='First Name';    
                        llab.innerText='Last Name';    
                        fcaption.innerText=response[key].fName
                        lcaption.innerText=response[key].lName

                        div.appendChild(img);
                        div.appendChild(flab);
                        div.appendChild(fcaption);
                        div.appendChild(llab);
                        div.appendChild(lcaption);

                        container.appendChild(div);
                    }    
                }
            });
        });
    });

Solution 4:

Just use JSON.parse(); in your response to resolve this issue

$(document).ready(function(){
    $('#search-button').click(function(){
        $.ajax( {
            type: 'POST',
            url: 'includes/process.php',
            data: $('#search-form').serialize(),
            dataType: 'json',
            success: function(response) {                     
                response = JSON.parse(response);
                for(data in response) {
                    $('#response_profile_pic').append("<img src='images/profile/" + response[data].profile_pic + "' alt='' />");
                    $('#response_fName').append("<li>" + response[data].fName +"</li>");
                    $('#response_lName').append("<li>" + response[data].lName + "</li>"); 
                }
                $('#open_compare_popup').show();
            }
        });
    });
});

<divclass="box-set"><ulclass="point_compare"><spanid="response_profile_pic"></span><label>First Name</label><h2id="response_fName"></h2><label>Last Name</label><spanid="response_lName"></span></ul></div>

$compare_records = array();
$compare_query=$conn->query($sql_compare);

if ($compare_query->num_rows > 0) {
    $outp = array();
    $outp = $compare_query->fetch_all(MYSQLI_ASSOC);
    echo json_encode($outp);
}

exit();