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 += "<div class='box-set'> <span class='compare_userpic' id='response_profile_pic'><img src='images/profile/" + val.profile_pic + "' alt='' /></span>
    <ul class='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();
            }
        });
    });
});

<div class="box-set"> 
    <ul class="point_compare">
        <span id="response_profile_pic"></span>
        <label>First Name</label><h2 id="response_fName"></h2>
        <label>Last Name</label><span id="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();