Json file not loading

I have a folder structure like this.

• [ site ]
  • [ js ]
  • [ json ]
    • hints.json
  • page.html

Now when I launch my page.html I have a button that when I click is going to load my hints.json file. Here is my script for loading the json.

$(function(){

  var jsonURL = "json/hints.json";
  var butt = $('.button .hints li');
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(value){
        console.log(" title = ", value.intro[0].title);
    });



  }); 

});

Json file structure.

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

Can anyone tell me why this would not work.

Update: This is been tested locally not from a server.

Here is a jsfid开发者_开发百科dle example even though I'm trying to get it to work locally. http://jsfiddle.net/r3bPC/1/

---

Json file structure.

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": Title text for page active, "copy": "copy text"}
             ]
}

Dump into http://jsonlint.com/ ....

Parse error on line 14:
...           "title": Titletextforpageacti
-----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '['

Well there's your problem.

Part 2

Grab that JS:

$(function(){

  var jsonURL = "json/hints.json";
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(json){
        // $("#title").text(json.name);
        console.log(" title = ", json.intro[0].title);
    });

});

Run it through http://jshint.com/ ...

Errors:

Line 4 butt.find('a').click(function(evt){
'butt' is not defined.
Line 1$(function(){
Unmatched '{'.
Line 11});
Expected ')' and instead saw ''.
Line 11});
Missing semicolon.

Well there's your other problem.

ps, undefined butts scare me.

---

complete tried and tested code,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){    
$.ajax({
type:'GET',
url:'hints.json',
dataType:'json',
success:function(json){
alert(json.intro[0].title); //this alerts title text
},
error:function(){
alert("dssdsdd");
}
});


});

</script>

or

$.getJSON("hints.json", function(json){

        alert(json.intro[0].title);
    });

hints.json

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

getJSON success callback

var jqxhr = $.getJSON("hints.json", function() {
  alert("success");
  alert(json.intro[0].title);
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });