How to pass JSON array correctly?

Question

i am trying to create a fade effect with the following...ive been told im nearly there apart from the passing of the json array. At the moment no images are displayed.

 //generate all the boxes
$.get('images.php',function(data){
  for (var i=0; i < totalBoxes; i++){
      var randomImage = data[Math.floor(Math.random() * data.length)];
      $('<div class="pf-box"><img class="black" src="' + randomImage['black'] + '" /><img class="colour" src="' + randomImage['colour'] + '" /></div>').hide().appendTo('#bg').fadeIn('slow').filter('.colour').css("opacity", 0);
  }
 },'json');

 //add the hover behavior to all the elements
 $('.colour').hover(function() {
   $(this).stop().fadeTo(700, 1);
 },function() {
   $(this).stop().fadeTo(700, 0);
 });

and images.php

    <?php 
   header('Content-type: application/json');
echo '[  
    {'black' : 'images/random/1.jpg', 'colour' : 'images/random/1-c.jpg'},  
    {'black' : 'images/random/2.jpg', 'colour' : 'images/random/2-c.jpg'}
]';
    ?>

Answer 1

Don't you need to escape the quotes inside the JSON string? Otherwise the php interpreter will fail to send all of what you want, and may even barf out some errors.

Answer 2

Use randomImage.black instead of randomImage['black']

Answer 3

Your echo is failing because of the single quotes in the JSON output breaking out of the echo.

Enclose your string with different quotes so you can echo properly:

<?php
header('Content-type: application/json'); 
echo "[
    {'black' : 'images/random/1.jpg', 'colour' : 'images/random/1-c.jpg'},
    {'black' : 'images/random/2.jpg', 'colour' : 'images/random/2-c.jpg'} 
]"; 
?>

Note the use of double quotes to enclose the echo string, instead of the single quotes you've used. (if you had double quotes inside the string, then you'd reverse it and use single on the outside).