从 JSON 文件中提取的 JavaScript 文件不再有效

Question

我昨天已经完成了这个工作，但是做了一些事情来破坏它，并且似乎找不到它是什么。 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"
  }
]

非常感谢任何帮助!

Answer 1

• 第 8 行第 1 栏，不要在循环内创建函数。 这指向看起来各种错误的代码
• 第 7 行第 6 栏，缺少分号。
• 第 103 行，第 38 栏，“默认参数”仅在 ES6 中可用(使用 esnext 选项)。 最可能的原因
• 第 118 行，第 10 栏，缺少分号。
• 第 123 行，第 10 栏，缺少分号。