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

Berry · Accepted Answer · 2009-11-06 00:48:43Z

2

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.

answered Nov 6, 2009 at 0:48

Berry

1,7492 gold badges11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Over a year ago

I am trying to create this effect: yellostudio.co.uk/temp/index.php with the code above on yellostudio.co.uk/temp/indexV2.php Do you know where i am going wrong?

Mike Gleason jr Couturier · Accepted Answer · 2009-11-06 00:56:19Z

0

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

answered Nov 6, 2009 at 0:56

Mike Gleason jr Couturier

9,2064 gold badges44 silver badges60 bronze badges

16 Comments

Mike Haboustak Over a year ago

there's no difference between the two in JavaScript

Mike Gleason jr Couturier Over a year ago

there is no official support for associative arrays in JavaScript.. give those points back

Mike Gleason jr Couturier Over a year ago

no problem, I forgot the "!" telling that I wasn't really mad.. :) here's a reference: hunlock.com/blogs/Mastering_Javascript_Arrays

Mike Gleason jr Couturier Over a year ago

"i didnt know i had removed any points sorry" Don't bother, I think it's Mr. Haboustak

Andy Over a year ago

No probs Mike i appreciate your help...do you know how i could get teh hover working?

|

Ian Hill · Accepted Answer · 2009-11-06 01:00:45Z

0

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

answered Nov 6, 2009 at 1:00

Ian Hill

3992 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to pass JSON array correctly?

3 Answers 3

1 Comment

16 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related