加载一个JSON文件

Question

I am trying to figure out how to load in a JSON file so that i am able to use JSON.parse on it i have been stuck on this for a couple hours i have reviewed other similar questions but they did not help and i have checked out. $.getJSON()

Here is my Java Script

 function JSONFile(){

   var obj = JSON.parse("JSON.json");
   var Subbackground = obj.Subbackground;
   var ButtonBG = obj.ButtonBG;
   var ButtonHov = obj.ButtonHov;
   var textColor = obj.textColor;
   var BorderSubColor = obj.BorderSubColor;
   var ButtonShadow = obj.ButtonShadow;
   var ButtonBShawdow = obj.ButtonBShawdow;
   var BorderMain = obj.BorderMain;
   var Sub1 = obj.Sub1;
   var Sub2 = obj.Sub2;
   var Sub3 = obj.Sub3;
   var Sub4 = obj.Sub4;
   var Sub5 = obj.Sub5;
   var Sub6 = obj.Sub6;
   var Sub7 = obj.Sub7;
   var Sub8 = obj.Sub8;
   var Sub9 = obj.Sub9;
   var Sub10 = obj.Sub10;
   var Steak = obj.Steak;
   var Pizza = obj.Pizza;
   var Berger = obj.Berger;    
   var Lobster = obj.Lobster;
   var Chicken = obj.Chicken;
   var Shrimp = obj.Shrimp;
   var BLT = obj.BLT;
   var Salmon = obj.Salmon;
   var CatFish = obj.CatFish;
   var Crab = obj.CatFish;

    $('.myButton').css({'box-shadow': '0px 10px 0px ' + ButtonBShawdow , 'background': 'linear-gradient(' + ButtonBG.direction + ', ' + ButtonBG.Color1 + ', ' + ButtonBG.Color2 + ')', 'border-radius': '28px', 'border': '1px solid' + BorderMain , 'display': 'inline-block', 'color': textColor, 'font-family': 'channel', 'width': '220px', 'font-size': '10px', 'padding': '16px 31px', 'text-decoration': 'none', 'text-shadow': '1px 4px 0px' + ButtonShadow});
}
JSONFile();

and here is my JSON

{

    "Subbackground":{"direction": "to bottom", "Color1": " #a90329 0%", "Color2": "#8f0222 44%", "Color3": "#6d0019 100%"},
    "ButtonBG": {"direction":"to bottom", "Color1": "#216332 5%", "Color2": "#5cbf2a 100%"},
    "ButtonHov": {"direction":"to bottom", "Color1": "#5cbf2a 5%", "Color2": "#216332 100%"},
    "textColor":"#ffffff",
    "BorderSubColor":"#a90329",
    "ButtonShadow":"#2f6627",
    "ButtonBShawdow":"#3dc21b",
    "BorderMain":"#18ab29",
    "Sub1":"steaknshake", "urlPath1":"http://www.steaknshake.com/",
    "Sub2":"steaknshake", "urlPath2":"http://www.steaknshake.com/",
    "Sub3":"steaknshake", "urlPath3":"http://www.steaknshake.com/",
    "Sub4":"steaknshake", "urlPath4":"http://www.steaknshake.com/",
    "Sub5":"steaknshake", "urlPath5":"http://www.steaknshake.com/",
    "Sub6":"steaknshake", "urlPath6":"http://www.steaknshake.com/",
    "Sub7":"steaknshake", "urlPath7":"http://www.steaknshake.com/",
    "Sub8":"steaknshake", "urlPath8":"http://www.steaknshake.com/",
    "Sub9":"steaknshake", "urlPath9":"http://www.steaknshake.com/",
    "Sub10":"steaknshake", "urlPath10":"http://www.steaknshake.com/",
    "Pizza":"steaknshake", "urlPathP":"http://www.steaknshake.com/",
    "Berger":"steaknshake", "urlPathB":"http://www.steaknshake.com/",
    "Lobster":"steaknshake", "urlPathL":"http://www.steaknshake.com/",
    "Chicken":"steaknshake", "urlPathCN":"http://www.steaknshake.com/",
    "Shrimp":"steaknshake", "urlPathSP":"http://www.steaknshake.com/",
    "BLT":"steaknshake", "urlPathB":"http://www.steaknshake.com/",
    "Salmon":"steaknshake", "urlPathSN":"http://www.steaknshake.com/",
    "CatFish":"steaknshake", "urlPathCF":"http://www.steaknshake.com/",
    "Steak":"steaknshake", "urlPathSK":"http://www.steaknshake.com/",
    "Crab":"steaknshake", "urlPathCB":"http://www.steaknshake.com/"
}

Answer 1

As mentioned above, you can achieve that with JQuery by either making an ajax call, like so for example

$.ajax({ 
  type: 'GET', 
  url: 'http://example/functions.aspx', 
  data: { get_param: 'value' }, 
  dataType:'json',
  success: function (data) { 
             var names = data
             $('#aDiv').html(data);
   }
  });

or by using parseJSON with something like this

var json = $.parseJSON(j);
    $(json).each(function(i,val){
        $.each(val,function(k,v){
              console.log(k+" : "+ v);     
    });
    });