Question

我正在构建一个JSON字符串，它将公交时刻表加载到本地存储中，然后根据搜索词提供公交时刻表上的站点。我遇到许多错误。我收到的第一个是第40行的“，”。第二个是第50行的“ load not a function”。第三个是第53行的“ click is not defined”。我知道可能还有其他问题，但我无法找到列出的问题的解决方案。

<html>
<head>
<script type="text/javascript">

/**
 * A JSON string that holds data. There is no problem with the JSON string
 * @type {String}
 */

	var busSchd = '{"Routes": [{"routeName": "Milledge","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "Orbit","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "East West","stops":[{"Stop 1":"East Campus Deck","Stop 2":"Creswell Hall","Stop 3":"Hull St Deck","Stop 4":"Main Library","Stop 5":"Joe Frank Harris"}]}]}';


const load = () => {
	let data = JSON.parse(busSchd);
	console.log("a");
for(var i=0; i<data.Routes.len;)
	{
		let route = data.Routes[i];
		let routeStr = route.routeName;
		localStorage.set(routeStr,JSON.stringify(route.stops));
	}
	
};

	const clicked = () => {
		
		var search = document.getElementById("search");
		var results = localStorage.getItem(search);

		if(results = null)
		{
			document.getElementById("result").innerHTML = "<b>There are no results for that route name.</b>"
		}
		else
		{
			var stops = results;
			var output='';
			for(var key in stops[0])
			{
				var output = output  '<b>' + key + '</b> : ' + stops[0][key] + '<br>';
			}
			document.getElementById("result").innerHTML = output;
		}
	};

</script>

</head>
<body>
<input type="button" value="Load Route Data" id="load" onclick="load();">
<br>
<br>	
<input type="text" id="search"><input type="button" value="Find Route" id="submit" onclick="clicked();"><br>
<br><br>
<div id="result">
</div>
</body>
</html>

Answer 1

发现了一些小错误。清理语法后，一切似乎都可以正常工作。

<html>
<head>
  <script type="text/javascript">
    /**
     * A JSON string that holds data. There is no problem with the JSON string
     * @type {String}
     */

    var busSchd = '{"Routes": [{"routeName": "Milledge","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "Orbit","stops":[{"Stop 1":"Main Library","Stop 2":"Clarke Central","Stop 3":"Five Points South","Stop 4":"Five Points North","Stop 5":"Waddell"}]},{"routeName": "East West","stops":[{"Stop 1":"East Campus Deck","Stop 2":"Creswell Hall","Stop 3":"Hull St Deck","Stop 4":"Main Library","Stop 5":"Joe Frank Harris"}]}]}';

    const load = () => {
      let data = JSON.parse(busSchd);
      console.log("a");
      for (var i = 0; i < data.Routes.len;) {
        let route = data.Routes[i];
        let routeStr = route.routeName;
        localStorage.set(routeStr, JSON.stringify(route.stops));
      }
    };

    const clicked = () => {
      var search = document.getElementById("search");
      var results = localStorage.getItem(search);

      if (results === null) {
        document.getElementById("result").innerHTML = "<b>There are no results for that route name.</b>";
      } else {
        var stops = results;
        var output = '';
        for (var key in stops[0]) {
          output = output + '<b>' + key + '</b> : ' + stops[0][key] + '<br>';
        }
        document.getElementById("result").innerHTML = output;
      }
    };
  </script>
</head>
<body>
  <input type="button" value="Load Route Data" id="load" onclick="load();">
  <br>
  <br>
  <input type="text" id="search"><input type="button" value="Find Route" id="submit" onclick="clicked();"><br>
  <br><br>
  <div id="result">
  </div>
</body>
</html>

更新

它是.setItem('key', 'value')，而不是.set()。查看更多：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

要在您的代码中解决此问题，请尝试：

localStorage.setItem(routeStr, JSON.stringify(route.stops));

此外，搜索必须与您现在的搜索方式完全匹配。您可能需要考虑一些自动完成建议。我通常使用jQuery和jQuery UI，并且这种类型的数据将适用于jQuery UI Autocomplete。如果需要，您可以自己动手做。

JSON字符串无法正常运行，调试问题

1 个答案: