小賴的實戰記錄

由於需要常常使用json，所以有時候測試時，需要看回傳的資料是否正確，常常複製到Online Json Parser去看，有點花太多時間

http://json.parser.online.fr/

所以開始想說，能不能使用js library，直接在本地顯示json，然後我就找到以下這個網址

https://www.jqueryscript.net/demo/jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer/

如果想快點使用這個功能可以複製我以下程式碼

及下載對方的程式library

<link href="jquery.json-viewer.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.json-viewer.js"></script>

Html

		<textarea id="json-input" style="margin-top:20px;display:none" rows="25">
		</textarea>
		<button id="btn-json-viewer">json-viewer</button>
		<pre id="json-renderer"></pre>
		<script>
			$(document).ready(function(){
				var json = <?=json_encode($json)?>;
				$('#json-input').html(document.createTextNode(JSON.stringify(json, null, 4)));
				$('#btn-json-viewer').click(function() {
					try {
						var input = eval('(' + $('#json-input').val() + ')');
						$('#json-renderer').json_viewer(input);
					}
					catch (error) {
						alert("Cannot eval JSON: " + error);
					}
				});

				// Display JSON sample on load
				$('#btn-json-viewer').click();
			});
		</script>

以上弄完，應該就可以快速使用