Problem sa ucitavanjem podataka iz .json

Imam problem da na HTML strani ocitam podatke iz .json. Pronasla sam neki kod na internetu ali ne znam zbog cega ne radi, tj. ne znam gde gresim. U koliko neko zna u cemu je problem bilo bi lepo da mi pomogne.

Postavicu ovde kod a uploadovacu i .html fajl sa javascriptom i .json fajl.

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>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {

   var div = $('.profile');
   var ul = $('ul');
   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.person, function(i, f) {
           people.push([f.firstName, f.lastName, f.job, f.image]);
           ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
       });
       $('a').on('click', addContent);
   });

});

$(function() {

   var div = $('.profile');
   var ul = $('ul');
   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.person, function(i, f) {
           people.push([f.firstName, f.lastName, f.job, f.image]);
           ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')
       });
       $('a').on('click', addContent);
   });

   function addContent(e) {
       e.preventDefault();
       var hash = this.hash.replace('#','');
       div.html('');
       div.append('<img src="images/' + people[hash][3] + '">');
       div.append('<p><b>Name:</b> ' + people[hash][0] + ' ' + people[hash][1] + '</p>');
       div.append('<p><b>Job:</b> ' + people[hash][2] + '</p>');
   }

});
</script>
</head>
<body>
<div class="wrapper">
   <ul></ul>
   <div class="profile"></div>

</div>

</body>
</html>

Ovo radi:

Code (javascript):

$(document).ready(function() {

   var div = $('.profile');

   var ul = $('ul');

   var people = [];

   $.getJSON('people.json', function(data) {

       $.each(data.person, function(i, f) {

           people.push([f.firstName, f.lastName, f.job, f.image]);

           ul.append('<li><a href="#' + i + '">' + f.firstName + '</a></li>')

       });

       $('a').on('click', addContent);

   });

   function addContent(e) {

       e.preventDefault();

       var hash = this.hash.replace('#','');

       div.html('');

       div.append('<img src="images/' + people[hash][3] + '">');

       div.append('<p><b>Name:</b> ' + people[hash][0] + ' ' + people[hash][1] + '</p>');

       div.append('<p><b>Job:</b> ' + people[hash][2] + '</p>');

   }

});

Instaliraj firebug add-on za Firefox bice ti mnogo lakse da pronadjes greske prilikom kodiranja. Za tvoj kod je 'bacao' gresku addContent is not defined!

Forum kao aplikacija na telefonu

Srodne teme