how to retrieve echo data from php to jquery 1 by 1

Question

I have a JQuery on click that sends a php query to MySql and then I want to send the data back 1 by 1 on JQuery.

But I only know how to send back results from php to JQuery as a whole.

my current JQuery:

$(function() {
    $(".img_thumb_holder").on("click", function() {
        $.ajax({
        type: "POST",
        url: "CMS/PHP/retrieveAuthorDetails.php",
        success: function(data) {
                alert(data);
            }
        });
    });
});

my current php:

<?php
include 'dbAuthen.php';
$sql = "SELECT * FROM users WHERE Name = 'james'";

$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result))
{
    echo $row['UserID'];;
    echo $row['EmailAddr'];
}
?>

the outputs are both UserID and EmailAddr, I don't know how to just display either the UserID or EmailAddr out only

I tried alert(data[0]), but it only displayed one letter of the result.. Any ideas on how to do this?

UPDATE: After sean's help i have the current updated code

Jquery:

$(function() {
    $(".img_thumb_holder").on("click", function() {
        $.ajax({
        type: "POST",
        dataType: "json",
        url: "CMS/PHP/retrieveAuthorDetails.php",
        success: function(data) {
                $.each(data, function() {
                    var userid = data.userid;
                    var useremail = data.email;
                    // i think there something wrong with this as it will keep repeating storing the userid and email for each data.. can someone verify?
                });
            }
        });
    });
});

PHP

<?php
include 'dbAuthen.php';
$sql = "SELECT * FROM users WHERE Name = 'honwenhonwen'";

$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result))
{
    $arr = array(
        "userid" => "HonWen",
        "email" => "honwen@hotmail.com"
    );
}

echo json_encode($arr);
?>

Answer 1

In your php, save the results to an array -

<?php
include 'dbAuthen.php';
$array = array(); // create a blank array
$sql = "SELECT * FROM users WHERE Name = 'james'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result))
{
    // add each result to the array
    $array[] = array('UserID'=> $row['UserID'], 'EmailAddr'=> $row['EmailAddr']);
}

echo json_encode($array); // json_encode() the array
?>

Then in your js/ajax you can loop through each value

$(function() {
    $(".img_thumb_holder").on("click", function() {
        $.ajax({
          type: "POST",
          url: "CMS/PHP/retrieveAuthorDetails.php",
          success: function(data) {
            // loop through each returned value
            $.each(data, function(){
                  //alert each result, this is just an example as alert() for each result is not a great idea
                  alert("UserID:"+ this.UserID + " EmailAddr:" + this.EmailAddr);
            });
          }
        });
    });
});

Answer 2

jquery

$(function() {
        $(".img_thumb_holder").on("click", function() {
            $.ajax({
            type: "POST",
            dataType: "json",
            url: "CMS/PHP/retrieveAuthorDetails.php",
            success: function(data) {
                    $.each(data, function() {
                        var userid = data.userid;
                        var useremail = data.email;
                        // i think there something wrong with this as it will keep repeating storing the userid and email for each data.. can someone verify?
                    });
                }
            });
        });
    });

php

<?php
include 'dbAuthen.php';
$sql = "SELECT * FROM users WHERE Name = 'honwenhonwen'";

$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result))
{
    $arr = array(
        "userid" => "HonWen",
        "email" => "honwen@hotmail.com"
    );
}

echo json_encode($arr);
?>