Question

I have a php file that creates a json array for my images and corresponding text:

<?php
$images = array(
"Image 1" => array("name" => "Image 1", 
            "price" => "$299", 
            "desc" => "Description 1",
            "image" =>"images/image1.jpg"),
"Image 2"   => array("name" => "Image 2", 
            "price" => "$199", 
            "desc" => "Description 2",
            "image" => "images/image2.jpg"),
"Image 6"   => array("name" => "Image 6", 
            "price" => "$199", 
            "desc" => "Description 6",
            "image" => "images/image6.jpg")
);

echo json_encode($images);

and my jQuery function looks like this:

$(document).ready(function(){
var $div = $("#thumbs");
$.getJSON('getProducts.php', function(data) {
    jQuery.each(data, function(key, val){
        $("<img />").attr("src", val).appendTo($div);
    });
});
});

When I run this, I only get broken image links. Firebug shows:

"NetworkError: 404 Not Found - http://localhost/wpdhw8/%5Bobject%20Object%5D"

Thanks in advance for your help!

Oh, and I’ve moved the images to the root so I took out the ‘images/’ from the filename.

And to answer my own question, I added a caption to the image by adding the line:

$($div).append('<p>' + val.name + '</p>');

right under:

$("<img />").attr("src", val.image).appendTo($div);

I really appreciate the help on this site! Thank-you!

Answer 1

It should be:

$.getJSON('getProducts.php', function(data) {
    jQuery.each(data, function(key, val){
        $("<img />").attr("src", val.image).appendTo($div);
    });
});

Each val is an object like:

{ name: "Image 1",
  price: "$299",
  desc: "Description 1",
  image: "images/image1.jpg"
}