My JS and HTML is at a JS Fiddle, here. I've put the JSON object in the place for CSS because I don't have any css so I don't think it will cause a problem. The problem is that I can't get it working... I think I have a error somewhere in my ajaxCall function but I can't find it. The error message says
GET ....[HTTP/1.1 304 Not Modified 12ms]
I am trying at this on my local webserver, using Wamp.
JSON file:
{
"adrBook": [
{
"name": "Nikola Markovic",
"email": "nikola@gmail.com",
"location": "Serbia"
},
{
"name": "Petar Nikolic",
"email": "petar@gmail.com",
"location": "Germany"
}
{
"name": "Marko Stojanovic",
"email": "markos@gmail.com",
"location": "Swedish"
},
{
"name": "Dusan Uzelac",
"email": "dusanu@gmail.com",
"location": "Holand"
},
{
"name": "Petar Grujic",
"email": "petarg@gmail.com",
"location": "USA"
},
{
"name": "Nikola Jesic",
"email": "nikolaj@gmail.com",
"location": "China"
},
{
"name": "John Man",
"email": "johnm@gmail.com",
"location": "Japan"
},
{
"name": "Jeniffer Gray",
"email": "jenifferg@gmail.com",
"location": "Bosnia"
},
{
"name": "Marc Brown",
"email": "marcb@gmail.com",
"location": "Croatia"
},
{
"name": "Nikola Ilic",
"email": "nikolai@gmail.com",
"location": "Macedonia"
},
{
"name": "Nemanja Nikolic",
"email": "nemanjan@gmail.com",
"location": "Slovenia"
},
{
"name": "Stefan Nikolic",
"email": "stefann@gmail.com",
"location": "Romania"
}
]
}
The problem lies within the browsers' default behavior when clicking on a <button> inside of a <form>. By default, this causes the form to be submitted, which results in a page reload. Thus, execution of your JavaScript code is halted and the XMLHttpRequest is never completed (or, maybe, even started).
You can prevent the browser from reloading the page by calling the preventDefault() method of the event object:
search: function(event) {
event.preventDefault();
// everything else stays the same …
With this change, the rest of your code runs through, and you'll be confronted with the JSON syntax error(s) pointed out in the comments. Happy debugging! :)