Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fixing console formatted output. some restyling on demo page.

  • Loading branch information...
commit 76eb5ec087d316806ab5c5afa990516cf470ee18 1 parent c7f0a00
@beneidel beneidel authored
View
4 bin/jsondiffpatch.js
@@ -7,6 +7,9 @@ var requireFromDir = function(filename) {
var jsondiffpatch = requireFromDir('../src/jsondiffpatch');
jsondiffpatch.config.diff_match_patch = requireFromDir('../lib/diff_match_patch_uncompressed.js');
+jsondiffpatch.config.objectHash = function(obj) {
+ return obj._id || obj.id || obj.name || JSON.stringify(obj);
+};
jsondiffpatch.console = requireFromDir('../src/jsondiffpatch.console');
var util = require('util'), fs = require('fs');
@@ -24,4 +27,5 @@ var dataOrig = JSON.parse(fs.readFileSync(file1));
var dataNew = JSON.parse(fs.readFileSync(file2));
var delta = jsondiffpatch.diff(dataOrig, dataNew);
+
console.log(jsondiffpatch.console.diffToText(dataOrig, dataNew, delta, hideUnchanged));
View
79 demo/index.htm
@@ -32,7 +32,7 @@
<a href='https://github.com/benjamine/JsonDiffPatch' id='fork_me'>
<img alt='Fork me on GitHub' src='http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png'>
</a>
- <h1>JsonDiffPatch Demo</h1>
+ <h1>Js<span class="jsondiffpatch-deleted"><span>on</span></span><span class="jsondiffpatch-added"><span>Diff</span></span>Patch Demo</h1>
<div class="jsontext">
<div>
<label for="json1">
@@ -61,24 +61,40 @@
<input id="compare" type="button" value="Compare"><input id="swap" type="button" value="Swap"><input id="clear" type="button" value="Clear">
</div>
<div class="results">
- <h2>Visual Diff</h2>
- <div class="header-options">
- <input id="showunchanged" type="checkbox">
- <label for="showunchanged">
- Show unchanged values
- </label>
- </div>
- <p class="visualdiff" id="visualdiff">
- </p>
- <div class="jsondiff">
- <h2>JSON Diff</h2>
- <p>
- (<span id="jsondifflength"></span>
- KB)
- </p>
- <textarea id="jsondiff">
- </textarea>
- </div>
+ <table>
+ <thead>
+ <tr>
+ <th>
+ <h2>Visual Diff</h2>
+ <div class="header-options">
+ <input id="showunchanged" type="checkbox">
+ <label for="showunchanged">
+ Show unchanged values
+ </label>
+ </div>
+ </th>
+ <th>
+ <h2>JSON Diff</h2>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="visualdiff">
+ <p class="visualdiff" id="visualdiff">
+ </p>
+ </td>
+ <td class="jsondiff">
+ <p>
+ (<span id="jsondifflength"></span>
+ KB)
+ </p>
+ <pre id="jsondiff">
+ </pre>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
<script type="text/javascript">
@@ -88,28 +104,7 @@
var data = {
name: 'South America',
- summary: "\
- South America (Spanish: América del Sur, Sudamérica or Suramérica; Portuguese: \
- América do Sul; Quechua and Aymara: Urin Awya Yala; Guarani: Ñembyamérika; \
- Dutch: Zuid-Amerika; French: Amérique du Sud) is a continent situated in the \
- Western Hemisphere, mostly in the Southern Hemisphere, with a relatively small \
- portion in the Northern Hemisphere. The continent is also considered a \
- subcontinent of the Americas.[2][3] It is bordered on the west by the Pacific \
- Ocean and on the north and east by the Atlantic Ocean; North America and the \
- Caribbean Sea lie to the northwest. It includes twelve countries: Argentina, \
- Bolivia, Brazil, Chile, Colombia, Ecuador, Guyana, Paraguay, Peru, Suriname, \
- Uruguay, and Venezuela. The South American nations that border the Caribbean \
- Sea—including Colombia, Venezuela, Guyana, Suriname, as well as French Guiana, \
- which is an overseas region of France—are also known as Caribbean South America. \
- \
- South America has an area of 17,840,000 square kilometers (6,890,000 sq mi). \
- Its population as of 2005 has been estimated at more than 371,090,000. South \
- America ranks fourth in area (after Asia, Africa, and North America) and fifth \
- in population (after Asia, Africa, Europe, and North America). The word \
- America was coined in 1507 by cartographers Martin Waldseemüller and Matthias \
- Ringmann, after Amerigo Vespucci, who was the first European to suggest that \
- the lands newly discovered by Europeans were not India, but a New World \
- unknown to Europeans.",
+ summary: "South America (Spanish: América del Sur, Sudamérica or Suramérica; Portuguese: América do Sul; Quechua and Aymara: Urin Awya Yala; Guarani: Ñembyamérika; Dutch: Zuid-Amerika; French: Amérique du Sud) is a continent situated in the Western Hemisphere, mostly in the Southern Hemisphere, with a relatively small portion in the Northern Hemisphere. The continent is also considered a subcontinent of the Americas.[2][3] It is bordered on the west by the Pacific Ocean and on the north and east by the Atlantic Ocean; North America and the Caribbean Sea lie to the northwest. It includes twelve countries: Argentina, Bolivia, Brazil, Chile, Colombia, Ecuador, Guyana, Paraguay, Peru, Suriname, Uruguay, and Venezuela. The South American nations that border the Caribbean Sea—including Colombia, Venezuela, Guyana, Suriname, as well as French Guiana, which is an overseas region of France—are also known as Caribbean South America. South America has an area of 17,840,000 square kilometers (6,890,000 sq mi). Its population as of 2005 has been estimated at more than 371,090,000. South America ranks fourth in area (after Asia, Africa, and North America) and fifth in population (after Asia, Africa, Europe, and North America). The word America was coined in 1507 by cartographers Martin Waldseemüller and Matthias Ringmann, after Amerigo Vespucci, who was the first European to suggest that the lands newly discovered by Europeans were not India, but a New World unknown to Europeans.",
surface: 17840000,
timezone: [-4, -2],
@@ -257,7 +252,7 @@
$('.jsondiff').hide();
}
else {
- $('#jsondiff').val(JSON.stringify(d, null, 2));
+ $('#jsondiff').text(JSON.stringify(d, null, 2));
$('#jsondifflength').text(Math.round(JSON.stringify(d).length / 102.4) / 10.0);
$('#visualdiff').empty().append(jsondiffpatch.html.diffToHtml(json1, json2, d));
$('.jsondiff').show();
View
37 demo/style.css
@@ -52,19 +52,33 @@ h2 {
}
.header-options {
+ font-weight: normal;
margin-left: 30px;
display: inline-block;
}
+table {
+ padding: 20px;
+}
+
+td, th {
+ vertical-align: top;
+ text-align: left;
+}
+
#jsondiff {
- width: 95%;
- height: 200px;
+ overflow: scroll;
+ max-width: 800px;
+}
+
+.jsondiff {
+ width: 800px;
}
footer {
font-size: small;
text-align: center;
- margin: 40px;
+ margin: 40px;
}
.credits {
@@ -79,3 +93,20 @@ footer {
.credits a:hover {
text-decoration: underline;
}
+
+.results {
+ margin-top: 20px;
+}
+
+.results table {
+ width: 100%;
+}
+
+.results {
+ width: 100%;
+}
+.results > div {
+ vertical-align: top;
+ display: inline-block;
+}
+
View
57 src/jsondiffpatch.console.js
@@ -1,4 +1,5 @@
var jsondiffpatch = require('./jsondiffpatch')
+var jdp = jsondiffpatch;
var clc = require('cli-color');
@@ -9,12 +10,15 @@ green = identity, red = identity, gray = identity, strike = identity;
green = clc.green;
red = clc.red;
+yellow = clc.yellow;
+orange = clc.orange;
strike = clc.strike;
var tremoved = function(text){
return strike(red(text));
},
tadded = green, tunchanged = gray, tnormal = identity, tdiffheader = gray,
+tmovedto = yellow, tmovedfrom = red,
indent = function(level){
return new Array(level || 0).join(' ');
};
@@ -31,7 +35,7 @@ objectToText = function(desc, o, hideUnchanged, level) {
), ': ');
}
- if (typeof o == 'object' && !jsondiffpatch.isDate(o)) {
+ if (o && typeof o == 'object' && !jsondiffpatch.isDate(o)) {
// a node (object or array)
buffer.push(o._t === 'a' ? '[\n' : '{\n');
for (var prop in o) {
@@ -64,7 +68,7 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
var positionForLabel = buffer.length;
var label = [desc];
if (n instanceof Array ) {
- label.push(' (array', n._key ? ', key=' + n._key : '', ')');
+ label.push(' (array)');
}
if (desc) {
label.push(': ');
@@ -122,19 +126,14 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
} else {
if (d[2] === 3) {
// item moved
- buffer.push(tadded('<= _' + metadata));
- buffer.push(tadded(objectToText(null, n, hideUnchanged, level)));
- labelFunc = tremoved;
-
- var melem = document.createElement('div');
if (desc == d[1]) {
- buffer.push(tadded('<= _' + metadata));
- buffer.push(tadded(objectToText(null, n, hideUnchanged, level)));
- labelFunc = tadded;
+ buffer.push(tmovedto('<= _' + metadata));
+ buffer.push(tmovedto(objectToText(null, n, hideUnchanged, level)));
+ labelFunc = tmovedto;
} else {
- buffer.push(tremoved('=> ' + d[1]));
+ buffer.push(tmovedfrom('=> ' + d[1]));
+ labelFunc = tmovedfrom;
}
- elem.appendChild(melem);
}
}
}
@@ -146,7 +145,7 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
// a node (object or array)
if (typeof metadata != 'undefined') {
- buffer.push('<= _' + metadata);
+ buffer.push(tmovedto('<= _' + metadata + ' '));
}
// only members in diff (skip unchanged members)
@@ -166,12 +165,17 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
toInsert[d[prop][1]] = { prop: prop, from: index };
}
removedIndices[index] = true;
- var li = diffNodeToText(prop, jdp.getByKey(o, index), null, hideUnchanged, level, d[prop]);
+ items.push({
+ removed: true,
+ text: diffNodeToText(prop, jdp.getByKey(o, index), null, d[prop], hideUnchanged, level + 1)
+ });
} else {
// unchanged
var prop = index.toString();
- var li = objectToText(index, o[index], hideUnchanged, level);
- items.push(li);
+ items.push({
+ unchanged: true,
+ text: objectToText(index, o[index], hideUnchanged, level + 1)
+ });
}
}
for (var prop in d) {
@@ -201,19 +205,27 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
}
}
oldIndex = parseInt(oldIndex, 10);
- var li = diffNodeToText(index, jdp.getByKey(o, oldIndex), jdp.getByKey(n, index), d[prop], hideUnchanged, level, insertion.from));
- items.splice(index + indexOffset, d[prop].length == 1 || d[prop][2] === 3 ? 0 : 1, li);
+ var item = {
+ inserted: true,
+ from: insertion.from,
+ text: diffNodeToText(index, jdp.getByKey(o, oldIndex), jdp.getByKey(n, index),
+ d[prop], hideUnchanged, level + 1, insertion.from)
+ };
+ items.splice(index + indexOffset, d[prop].length == 1 || d[prop][2] === 3 ? 0 : 1, item);
}
}
for (index = 0; index < items.length; index++) {
- buffer.push(items[index]);
+ var item = items[index];
+ if (!item.unchanged || !hideUnchanged) {
+ buffer.push(items[index].text);
+ }
}
} else {
for (var prop in d) {
if (d.hasOwnProperty(prop) && prop !== '_t') {
- buffer.push(diffNodeToText(prop, jsondiffpatch.getByKey(o, prop), jsondiffpatch.getByKey(n, prop), d[prop]
- , hideUnchanged, level+1));
+ buffer.push(diffNodeToText(prop, jsondiffpatch.getByKey(o, prop), jsondiffpatch.getByKey(n, prop),
+ d[prop], hideUnchanged, level + 1));
}
}
@@ -227,7 +239,7 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
k = o[prop][o._key];
}
if (!d || !d.hasOwnProperty(k)) {
- buffer.push(objectToText(k, o[prop], hideUnchanged, level+1));
+ buffer.push(objectToText(k, o[prop], hideUnchanged, level + 1));
}
}
}
@@ -235,7 +247,6 @@ var diffNodeToText = function(desc, o, n, d, hideUnchanged, level, metadata){
}
}
-
buffer.push(indentation, d._t === 'a' ? ']\n' : '}\n');
}
View
2  src/jsondiffpatch.js
@@ -420,7 +420,7 @@
};
var arrayDiff = function(o, n){
- return sequenceDiffer.diff(o, n, jdp.config.objectHash, jsondiffpatch.diff);
+ return sequenceDiffer.diff(o, n, jdp.config.objectHash, jdp.diff);
};
var objectDiff = function(o, n){
View
11 test/testdata2.json
@@ -53,11 +53,6 @@
"unasur": true
},
{
- "name": "Colombia",
- "capital": "Bogotá",
- "independence": "1810-07-20T03:00:00.000Z"
- },
- {
"name": "Ecuador",
"capital": "Quito",
"independence": "1809-08-10T03:00:00.000Z",
@@ -76,6 +71,12 @@
"unasur": true
},
{
+ "name": "Colombia",
+ "capital": "Bogotá",
+ "independence": "1810-07-20T03:00:00.000Z",
+ "population": 42888594
+ },
+ {
"name": "Suriname",
"capital": "Paramaribo",
"independence": "1975-11-25T03:00:00.000Z",
Please sign in to comment.
Something went wrong with that request. Please try again.