Javascript 如何在本地加载JSON？

我想有一个对象持有多张图片的名称和链接。我希望我的函数解析JSON并将其转换为一个对象。我的HTML是

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

我的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"}
    ]
}

---

出于某种原因，它说我在anonymous的0处的JSON中有一个意外的令牌I。我没有看到任何“我”这个角色，我感到很沮丧

您可以使用

---

更多信息：

“images/picObject.json”

不是有效的json字符串

JSON.parse

需要一个JSON字符串而不是路径。

“images/picObject.JSON”

不是有效的JSON。听起来你实际上在找AJAX.lol，所以我不能在那里放一个链接？不，只是一个JSON字符串。谷歌提供了一个Ajax教程来开始如何检索JSON字符串。不，您必须使用其他方式加载内容，然后将内容传递到

JSON.parse

。

{   
    "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"}
    ]
}

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