JSONをローカルに読み込む方法は？

Question

複数の写真の名前とリンクを保持するオブジェクトが必要です。 JSONを解析してオブジェクトにする機能が必要です。私のHTMLは

<button type = "button" id = "easy" onclick = "displayEasy()"> Easy </button> 

私のJavascriptを

var easyMode = JSON.parse("images/picObject.json").imagesEasy; 

function displayEasy(){ 

    var objLen = easyMode.length; // number of elements in object 
    var rand = Math.floor((Math.random() * objLen) + 1); //random number 
    var imgSrc = easyMode[rand].name; //answer string 

    document.getElementById("image").src = imgSrc; //change image src 
} 

私のJSONファイルが、私が匿名で0でJSONで予期しないトークン、私を持っていると言っているいくつかの理由

{ 
    "imagesEasy":[ 
    {"name": "first aid", "imgSrc": "http://brainden.com/images/aid-rebus-puzzle.gif"}, 
    {"name": "once in a blue moon", "imgSrc": "http://brainden.com/images/blue-moon-pictogram.gif"}, 
    {"name": "for instance", "imgSrc": "http://brainden.com/images/word-picture-puzzle.gif"}, 
    {"name": "green with envy", "imgSrc": "http://brainden.com/images/green-envy.gif"}, 
    {"name": "broken promise", "imgSrc": "http://brainden.com/images/broken-promise.gif"}, 
    {"name": "a friend in need", "imgSrc": "http://brainden.com/images/friend-need.gif"}, 
    {"name": "travel over seas", "imgSrc": "http://brainden.com/images/overseas.gif"}, 
    {"name": "man overboard", "imgSrc": "http://brainden.com/images/man-overboard.gif"}, 
    {"name": "ready for anything", "imgSrc": "http://brainden.com/images/ready-anything.gif"}, 
    {"name": "no one to blame", "imgSrc": "http://brainden.com/images/blame.gif"}, 
    {"name": "space invaders", "imgSrc": "http://brainden.com/images/space-invaders-rebus.gif"}, 
    {"name": "small talk", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1037.gif"}, 
    {"name": "falling asleep", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1001.gif"}, 
    {"name": "jack in a box", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1029.gif"} 
    ], 
    "imageMed":[ 
    {"name": "fair and square", "imgSrc": "https://3.bp.blogspot.com/--R4Vm3cF3t0/UcgqjnwFSXI/AAAAAAAAGsU/L0VFY2Y_89I/s1600/Rebus-Phrase-Puzzle.gif"}, 
    {"name": "circle of friends", "imgSrc": "https://3.bp.blogspot.com/-_SMwfIispCg/UcgrMJL6Y_I/AAAAAAAAGsc/Qbanv1nRWBU/s1600/Rebus-Image-Brain-Teaser.gif"}, 
    {"name": "iron curtain", "imgSrc": "https://2.bp.blogspot.com/-dw88zKllR1A/Ud7qF2feiII/AAAAAAAAG1g/xdnFizCK_Sk/s1600/Rebus.gif"}, 
    {"name": "get up and go", "imgSrc": "https://4.bp.blogspot.com/-g4-ozrzyWMc/UZfJPps9JCI/AAAAAAAAGY8/8QCkBBH62b4/s1600/Rebus.gif"}, 
    {"name": "robin hood", "imgSrc": "https://3.bp.blogspot.com/-xYGAd4YhmVU/UHGLGLQgj0I/AAAAAAAADyc/35zptnZfHwA/s1600/picture-puzzle.png"}, 
    {"name": "side show", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1014.gif"}, 
    {"name": "tickled pink", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1043.gif"}, 
    {"name": "downright stupid", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1070.gif"}, 
    {"name": "split personality", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1069.gif"} 
    ], 
    "imageHard":[ 
    {"name": "scatter brain", "imgSrc": "https://1.bp.blogspot.com/-nKul-OXMRmk/URKLCStSZbI/AAAAAAAAFrQ/1Xd2WdRh9J4/s1600/Hard-Rebus-Riddle.jpg"}, 
    {"name": "summary", "imgSrc": "https://4.bp.blogspot.com/-KRPuXuAIC4c/UHGK-fKqSvI/AAAAAAAADw8/73vHbELom5s/s1600/Funny-Rebus-Puzzle.gif"}, 
    {"name": "painless operation", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1054.gif"}, 
    {"name": "the wrong side of the stick", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1098.gif"}, 
    {"name": "back to square one", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1018.gif"}, 
    {"name": "moral support", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1076.gif"}, 
    {"name": "beaten black and blue", "imgSrc": "http://www.fun-with-words.com/images/rebus/r1063.gif"} 
    ] 
} 

です。です私はどんな文字も見ないし、イムはイライラする。

Answer 1

あなたはjQuery

var easyMode; 
$.getJSON("images/picObject.json", function(data) { 
    console.log(data); // parsed json 
    easyMode = data.imagesEasy; 
}); 

もっと使ってJSONを読み込むことができます：http://api.jquery.com/jquery.getjson/