要从JSON文件中提取的JavaScript文件不再工作

我昨天处理了这个问题，但已经做了一些事情来破坏它，似乎找不到它是什么。JavaScript只是不再创建UL和LI元素对不起，我对JavaScript（以及一般的编码）还是个新手，所以调试对我来说仍然很困难，尤其是逻辑错误。我试着在Firefox中检查Firebug，但就是没有看到错误。

基本上，页面应该显示一个吉他列表，左栏有缩略图（nav id="guitars"），然后当你点击其中一个时，右侧较大的栏会通过（JSON文件）填充一个较大的吉他图片和文本。

这是我的HTML源代码和JavaScript:

// Find links for filtering the display
var range = document.querySelectorAll('.range');
for(var link in range){
	range[link].onclick= function(){
		filter(this.dataset.low, this.dataset.high);
	}
}
var myJSON = null;
	
function filter(json,low,high){
	clear("#display");
	var display = document.querySelector("#display");
	for(var key in json){
			//UL
		var ul = document.createElement("ul");		
		var image = createImage(json[key].name, ul);  // pass the name as 'file' to our fucntion of createImage			
		for(var subkey in json[key]){
				//LI
			var li = document.createElement("li");
			var txt = document.createTextNode(subkey +" "+ json[key][subkey]);
				// key = main level of json
				// subkey = properties within each level of an object for JSON
				li.appendChild(txt);
				ul.appendChild(li);
			} // end for subkey
			display.appendChild(ul);
	  } // end for key
} // end filter function
function Guitars(json){
	clear("#guitars");
	var display = document.querySelector("#guitars");
	for(var key in json){
		var ul = document.createElement("ul");		
	  	var li = document.createElement("li");
		li.dataset.key = key; // <li data-key="0" Yoda>
		li.onclick = viewGuitars;
		var image = createImage(json[key].name, li); // pass the name as 'file' to our fucntion of createImage		
		var txt = document.createTextNode(json[key].name);
		li.appendChild(txt);
		ul.appendChild(li);
		display.appendChild(ul);
	} // end for key
} // end filter function
function viewGuitars(){
	var single = myJSON[this.dataset.key]; /* get the single info for a JSON element, this === clicked li element in HTML */
	clear("#display");
	var display = document.querySelector("#display");
		//UL
		//if(low < json[key].cost && json[key].cost <= high){
	var ul = document.createElement("ul");		
	var image = createImage(single.name, ul);  // pass the name as 'file' to our fucntion of createImage
	for(var subkey in single){
				//LI
		var li = document.createElement("li");
		var txt = document.createTextNode(subkey +" "+ single[subkey]);
				// key = main level of json
				// subkey = properties within each level of an object for JSON
			li.appendChild(txt);
			ul.appendChild(li);
		} // end for subkey	
	display.appendChild(ul);
} // end for function
function log(msg){
    console.log(msg);
}
function clear(target){
	var t = document.querySelector(target);
	
	while(t.hasChildNodes()){
		t.removeChild(t.firstChild);	
	}
}
function loadJSON(callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'guitars.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }
 
 loadJSON(function(response){
	myJSON = JSON.parse(response); 
	filter(myJSON);
	// Build the character list
	 character(myJSON);
 });
 
 
 function createImage(file, parent, w=50){
	 	//set a var to the replaced text
		//log the repalced text var
		var str = file.toLowerCase();  //Look for guitars name in JSON file and make them LowerCase, ex. return back "gibson sg"
		var filename = str.replace(/'s/g, ""); //find blank space (/'s/g | s = space, g = global) and remove it
		
		filename = ("photos/"+filename+".jpg");
		var image = new Image(); // Make a new IMG object
		image.src = filename;
		image.style.width = w+"%";
		image.style.height = "auto";
		
		image.onload = function(){
			log('good ' + file );	
			parent.appendChild(image); //adds the image to the page!
		}
		
		image.onerror = function(){
			log('not able to load ' + filename );	
			//parent.appendChild(image);
		}
 }
 
 
 
 
 
 
 
 
 
 
 
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>JSON</title>
     	<style>
		#guitars {
			width:200px;
			float:left;
		}
		#guitars img {display:block}
		
		#guitars li {
			cursor: pointer;
		}
		
		#guitars li:hover {
			background-color: #000;
			color: #FFF;
		}
		
		#display {
			width:800px;
			float:left;
		}
		</style>
        
    </head>
    <body>
        <nav id="guitars">
            Guitar names to appear here
        </nav>
        <section id="display">
            
        </section>
        
        <script src="script.js"></script>
       
    </body>
</html>

这是我的JSON文件：

[
  {
    "MAKE":"Gibson",
    "MODEL":"SG",
    "COLOR":"Black",
    "BODY-TYPE":"Solid, 2x pointed horns",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gibson",
    "MODEL":"Les Paul",
    "COLOR":"Gold",
    "BODY-TYPE":"Solid, 1 pointed horn, 1 rounded",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gibson",
    "MODEL":"Firebird",
    "COLOR":"Red",
    "BODY-TYPE":"Solid, '"Z'" shaped w/ rounded horns",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gibson",
    "MODEL":"Explorer",
    "COLOR":"Burgandy",
    "BODY-TYPE":"Solid, '"Z'" shaped w/ pointed horns",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gibson",
    "MODEL":"Flying V",
    "COLOR":"Yellow",
    "BODY-TYPE":"Solid, '"V'" shaped w/ pointed horns",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Fender ",
    "MODEL":"Stratocaster",
    "COLOR":"Aqua Blue",
    "BODY-TYPE":"Solid, w bolt-on neck",
    "WOOD":"Alder, Ash, Poplar (varies)",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Fender ",
    "MODEL":"Telecaster",
    "COLOR":"'"Sunburst'"",
    "BODY-TYPE":"Solid, w bolt-on neck",
    "WOOD":"Alder, Ash, Poplar (varies)",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Fender ",
    "MODEL":"Jaguar",
    "COLOR":"Brown",
    "BODY-TYPE":"Solid, w bolt-on neck",
    "WOOD":"Alder, Ash, Poplar (varies)",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Fender ",
    "MODEL":"Mustang",
    "COLOR":"Bright Red",
    "BODY-TYPE":"Solid, w bolt-on neck",
    "WOOD":"Alder, Ash, Poplar (varies)",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Paul Reed Smith",
    "MODEL":"SE Standard",
    "COLOR":"Silver",
    "BODY-TYPE":"Solid, 2x pointed horns",
    "WOOD":"Maple",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Paul Reed Smith",
    "MODEL":"Dragon",
    "COLOR":"Orange",
    "BODY-TYPE":"Solid, 2x pointed horns",
    "WOOD":"Maple",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Paul Reed Smith",
    "MODEL":"McCarthy",
    "COLOR":"Dark Brown",
    "BODY-TYPE":"Solid, 2x pointed horns",
    "WOOD":"Maple",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gretsch",
    "MODEL":"Jupiter Thunderbird",
    "COLOR":"Black",
    "BODY-TYPE":"Solid, Asymetrical shape",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gretsch",
    "MODEL":"White Falcon",
    "COLOR":"White",
    "BODY-TYPE":"Semi-hollow, 1 pointed horn, 1 rounded",
    "WOOD":"Spruce",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Gretsch",
    "MODEL":"Triple Jet",
    "COLOR":"Copper",
    "BODY-TYPE":"Semi-hollow, 1 pointed horn, 1 rounded",
    "WOOD":"Mahogany",
    "ACOUSITC/ELECTRIC":"Electric"
  },
  {
    "MAKE":"Martin",
    "MODEL":"D-28",
    "COLOR":"Natural wood",
    "BODY-TYPE":"Hollow, '"dreadnought'" design",
    "WOOD":"Spruce",
    "ACOUSITC/ELECTRIC":"Acoustic"
  },
  {
    "MAKE":"Martin",
    "MODEL":"D-18",
    "COLOR":"Natural wood",
    "BODY-TYPE":"Hollow, '"dreadnought'" design",
    "WOOD":"Spruce",
    "ACOUSITC/ELECTRIC":"Acoustic"
  },
  {
    "MAKE":"Taylor",
    "MODEL":"310",
    "COLOR":"Natural wood",
    "BODY-TYPE":"Hollow, '"dreadnought'" design",
    "WOOD":"Rosewood",
    "ACOUSITC/ELECTRIC":"Acoustic"
  },
  {
    "MAKE":"Taylor",
    "MODEL":"360e",
    "COLOR":"Natural wood",
    "BODY-TYPE":"Hollow, '"dreadnought'" design",
    "WOOD":"Rosewood",
    "ACOUSITC/ELECTRIC":"Acoustic"
  }
]

非常感谢您的帮助！！