Use jquery's each() to loop through php array on success return

Question

How do I loop using JQuery's each() to get the data [sku] and [imagePath] that is returned to my success function from PHP array using AJAX's post?

Below is the array.

Array
(
[id] => 195
[sku] => Lemonpunnet
[variantName] => Lemon punnet
[qty] => 500
[productId] => SGG-PRD-3
[prodVariantStatus] => 1
[visible] => 1
[pricing] => Array
    (
        [price] => 660
    )

[modifiedDate] => 1448294444
[createDate] => 1448294444
[productVariantImages] => Array
    (
        [0] => Array
            (
                [id] => 268
                [imageName] => lemon.png
                [imagePath] => http://web-server-s3.s3.amazonaws.com/9/catalogue/lemon.png
                [visible] => 1
                [featured] => 
                [modifiedDate] => 1448294444
                [createDate] => 1448294444
            )

    )
)

)

And the following is what I currently have but it is not returning any data.

 $('#selectVariant').change(function () {
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
            $.each(data.variants,function(key,value){
                alert(key+":"+value);
            });
        }
    });
        return false;

Answer 1

Run .each on the data response.
Or if you want an individual element of the data object, address it directly.

Example:

success: function(data){
    $.each(data,function(key,value){
        console.log(key+":"+value);
    });

    // outside of the each
    console.log(data.sku);
    $.each(data.productVariantImages, function(){
        console.log(this.imagePath);
    })

}

Answer 2

If your data is JSON string:

alert(data['sku']);

$.each(data['productVariantImages'],function(key,value){
   $.each(value,function(key2,value2){
      if (key2 == 'imagePath') {
         alert(value2);
      }
   });
});