mirror of
https://github.com/samsonjs/json-diff.git
synced 2026-03-26 09:35:47 +00:00
56 lines
2.3 KiB
HTML
56 lines
2.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>JSON Diff</title>
|
|
<meta charset=utf8>
|
|
<link rel="stylesheet" href="css/json-diff.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
</head>
|
|
<body onload="init();">
|
|
<p align="center" style="margin: 2em;">Courtesy of <a href="http://tlrobinson.net/projects/javascript-fun/jsondiff/">tlrobinson</a>.
|
|
<br>
|
|
This version differs in that it supports <code>null</code> values,<br>
|
|
downplays the significance of changed properties with the key <code>key</code>,<br>
|
|
and provides links to jump from one change to the next.</p>
|
|
|
|
<h2>JSON Diff</h2>
|
|
<div class="contentbox" id="instructions">
|
|
<ul>
|
|
<li>Paste some JSON in each of the text fields. Click "Compare" to see the diff.</li>
|
|
<li>Changed portions are displayed in <span class="changed">yellow</span>. Additions are displayed in <span class="added">green</span>. Deletions are displayed in <span class="removed">red</span>.</li>
|
|
<li>It also works as a JSON viewer. Click the disclosure triangles to display/hide portions of the JSON.</li>
|
|
<li>Invalid JSON is indicated by the text fields turning red.</li>
|
|
<li>Swap the contents of the text areas by clicking "Swap". Clear them by clicking "Clear".</li>
|
|
</ul>
|
|
</div>
|
|
<div class="contentbox" id="inputs">
|
|
<textarea id="jsonA">
|
|
</textarea>
|
|
<textarea id="jsonB">
|
|
</textarea>
|
|
<input type="button" value="Compare" id="compare" onclick="startCompare();" />
|
|
<input type="button" value="Swap" id="swap" onclick="swapBoxes();"/>
|
|
<input type="button" value="Clear" id="clear" onclick="clearBoxes();"/>
|
|
</div>
|
|
<p align=center id=first style=display:none><a href=#change-0>first change</a></p>
|
|
<div class="contentbox" id="results">
|
|
</div>
|
|
<div class="contentbox" id="issues">
|
|
<h3>About</h3>
|
|
<p>JSON Diff is a simple way to visualize and compare <a href="http://json.org">JSON</a>.</p>
|
|
<h3>Known Issues</h3>
|
|
<ul>
|
|
<li>Diff algorithm not very intelligent when dealing with arrays</li>
|
|
<li>Probably doesn't work in IE</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<br />
|
|
<br />
|
|
<p>
|
|
© 2006-2010 Thomas Robinson. <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/us/">Some rights reserved</a>. </p>
|
|
</div>
|
|
|
|
<script src="js/lib/json-diff.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
</body>
|
|
</html>
|