CODEWITHSUNDEEP
jqueryarraysjson
Andy
Andy

Reputation: 3021

How to pass JSON array correctly?

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'}
]';
    ?>

Upvotes: 1

Views: 398

Answers (3)

Ian Hill
Ian Hill

Reputation: 399

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).

Upvotes: 0

Mike Gleason jr Couturier
Mike Gleason jr Couturier

Reputation: 9186

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

Upvotes: 0

Berry
Berry

Reputation: 1749

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.

Upvotes: 2

Related Questions