jQuery not working with JSON?

**Mentalhead** · 03-14-2011, 05:16 PM

For some reason, jQuery won't work with JSON in my example.
Here's my HTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JSON testing</title>


<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
 <script type="text/javascript" language="javascript" src="script.js"></script>

</head>
<body>
 <div>
 	<a href=#><img src="images/thumb1.jpg" /></a>
	<a href=#><img src="images/thumb2.jpg" /></a>
	<a href=#><img src="images/thumb3.jpg" /></a>
	<a href=#><img src="images/thumb4.jpg" /></a>
	<a href=#><img src="images/thumb5.jpg" /></a>
	<a href=#><img src="images/thumb6.jpg" /></a>
	<a href=#><img src="images/thumb7.jpg" /></a>
	<a href=#><img src="images/thumb8.jpg" /></a>
	<a href=#><img src="images/thumb9.jpg" /></a>
	<a href=#><img src="images/thumb10.jpg" /></a>
 </div>
</body>
</html>

JSON:

Code:

{
	"slike": [
		{
			"info": "Maslacak i oblaci",
			"detail": "Veliki Maslacak",
			"sr": "images/1.jpg",
			"t_sr": "images/thumb1.jpg"
		}, {
			"info": "Oblaci",
			"detail": "Lepi Oblaci",
			"sr": "images/2.jpg",
			"t_sr": "images/thumb2.jpg"
		}, {
			"info": "Prasuma",
			"detail": "Zelena Prasuma",
			"sr": "images/3.jpg",
			"t_sr": "images/thumb3.jpg"
		}, {
			"info": "Ptica",
			"detail": "Plava Ptica",
			"sr": "images/4.jpg",
			"t_sr": "images/thumb4.jpg"
		}, {
			"info": "Jezero",
			"detail": "Mirno Jezero",
			"sr": "images/5.jpg",
			"t_sr": "images/thumb5.jpg"
		}, {
			"info": "Klas Zita",
			"detail": "Dva Klasa Zita",
			"sr": "images/6.jpg",
			"t_sr": "images/thumb6.jpg"
		}, {
			"info": "Stonehenge?",
			"detail": "Lici Ali Nije Stonehenge",
			"sr": "images/7.jpg",
			"t_sr": "images/thumb7.jpg"
		}, {
			"info": "Zeleni Klas Zita",
			"detail": "Ovaj Klas Je Zelen",
			"sr": "images/8.jpg",
			"t_sr": "images/thumb8.jpg"
		}, {
			"info": "Jos Jedna Ptica",
			"detail": "I Ova Ptica Je Plava",
			"sr": "images/9.jpg",
			"t_sr": "images/thumb9.jpg"
		}, {
			"info": "Lijane?",
			"detail": "Mozda Nisu Lijane?",
			"sr": "images/10.jpg",
			"t_sr": "images/thumb10.jpg"
		}
	]
}

and jQuery:

Code:

$(document).ready(function() {
		$("img").click(function(){
		x=$(this).attr('src');
	 	$.getJSON('baza.json',function(json){
	 $.each(json.slike, function(i,v) {
      if (v.sr == x) {
            alert(v.t_sr); 
			} 
         });
		});
   });
   });

So what's the problem? Well, jQuery works like a charm unless I add the code after $.getJSON('baza.json',function(json){. I'm guessing that I'm doing something wrong here, so can anybody help me up a bit?

**Jeff Mott** · 03-15-2011, 12:03 AM

Give this a try (highlighted in red):

Code:

$(document).ready(function() {
    $("img").click(function(){
        x=$(this).attr('src');
        $.getJSON('baza.json',function(json){
            $.each(json.slike, function(i,v) {
                if (v.t_sr == x) {
                    alert(v.t_sr);
                }
            });
        });
    });
});