Output json array in jQuery

Question

I am a little stuck on how to retrieve all the values from the json array in jquery. I know it needs to be looped but how ? The function - at the moment is:

$.ajax({                                      
    url: 'query.php',                     
    data: "",                       
    dataType: 'json',                   
    success: ajaxfunction
   }); 

function ajaxfunction(json_data){
// problem is below, i need to output all the data from the array         
    console.log (json_data)
    while(json_data){
    $('#maindisplay').html("<b>Product: </b>"+json_data.prod_name+"<b> colour: </b>"+json_data.colour); // problem is here, i need to output all the data from the array
    }
  } 

The php:

$result = mysql_query("SELECT * FROM fproduct WHERE fproduct.category='Shirts'");
$elements = array ();
do{
   $row=mysql_fetch_array($result); 
    if ($row)    //if there is anything
              $elements[] = ($row); 

} while($row);
echo json_encode($elements);

Answer 1

You have to iterate over the elements of the array.

function ajaxfunction(json_data){
    for (var i = 0; i < json_data.length; i++){
        $('#maindisplay').append($("<b>Product: </b>"+json_data[i].prod_name+"<b> colour: </b>"+json_data[i].colour+"<br>"));
    }
}