Fix for zgrossbart#3

Adds an option to ignore the order of elements in arrays by recursively sorting arrays in the JSON object

Author: vbro

index-test.html

@@ -61,11 +61,13 @@ <h3>The semantic JSON compare tool</h3>
                 </div>
 
                 <div class="center">
+                    <input type="checkbox" name="ignore-array-order" id="ignore-array-order" />
+                    <label for="ignore-array-order">Ignore array order <br /> (this will sort arrays before comparing). </label><br />
+                    <br/>
                     <button id="compare">Compare</button>
                     <div class="throbber-loader"></div>
                     <br/><br/><br/><br/>
                     or try some <a href="#" id="sample">sample data</a>
-
                 </div>
 
                 <div class="right">

index.html

@@ -57,11 +57,13 @@ <h3>The semantic JSON compare tool</h3>
                 </div>
 
                 <div class="center">
+                    <input type="checkbox" name="ignore-array-order" id="ignore-array-order" />
+                    <label for="ignore-array-order">Ignore array order <br /> (this will sort arrays before comparing). </label><br />
+                    <br/>
                     <button id="compare">Compare</button>
                     <div class="throbber-loader"></div>
                     <br/><br/><br/><br/>
                     or try some <a href="#" id="sample">sample data</a>
-
                 </div>
 
                 <div class="right">

jdd.css

@@ -99,7 +99,7 @@ div.center {
     display: inline-block;
     vertical-align: top;
     text-align: left;
-    margin-top: 20%;
+    margin-top: 10%;
     margin-left: 2%;
 }
 

jdd.js

@@ -956,6 +956,11 @@ var jdd = {
         var left = JSON.parse($('#textarealeft').val());
         var right = JSON.parse($('#textarearight').val());
 
+        // if ignore order, then sort arrays
+        if ($('#ignore-array-order').is(':checked')) {
+            jdd.sortArrays(left);
+            jdd.sortArrays(right);
+        }
 
         var config = jdd.createConfig();
         jdd.formatAndDecorate(config, left);
@@ -1000,6 +1005,43 @@ var jdd = {
 
     },
 
+    /**
+     * For JSON objects a and b, convert objects to string and compare
+     */
+    jsonComparator: function jsonComparator(a,b) {
+        var aStr = JSON.stringify(a);
+        var bStr = JSON.stringify(b);
+        if (aStr > bStr) {
+            return 1;
+        }
+        else if (aStr < bStr) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    },
+
+    /**
+     * recursively sort arrays contained in the JSON object jsonData
+     */
+    sortArrays: function(jsonData) {
+        var dataType = $.type(jsonData);
+        if (dataType === "array") {
+            for (var i = 0; i < jsonData.length; i++) {
+                jdd.sortArrays(jsonData[i]);
+            }
+            jsonData.sort(jdd.jsonComparator);
+        }
+        else if (dataType === "object") {
+            for (var p in jsonData) {
+                if (jsonData.hasOwnProperty(p)) {
+                    jdd.sortArrays(jsonData[p]);
+                }
+            }
+        }
+    },
+
     /**
      * Load in the sample data
      */

jdd_test.js

@@ -120,6 +120,37 @@ QUnit.test( 'Object to array compare tests', function( assert ) {
     jdd.setupNewDiff();
 });
 
+QUnit.test( 'Arrays order test', function( assert ) {
+    $('#textarealeft').val('{"a": [1,2,3],"b":"abc"}');
+    $('#textarearight').val('{"b":"abc","a": [1,3,2]}');
+
+    jdd.compare();
+
+    // This test makes sure there wasn't a parsing error
+    assert.ok(jdd.diffs.length > 0, 'Checking for parsing errors' );
+
+    assert.ok(jdd.diffs.length === 2, 'Checking for the correct number of differences' );
+
+    assert.ok(jdd.diffs[0].type === jdd.EQUALITY, 'Checking incorrect type' );
+
+    $('#textarealeft').val('');
+    $('#textarearight').val('');
+    jdd.setupNewDiff();
+});
+
+QUnit.test( 'Arrays ignore order test', function( assert ) {
+    $('#textarealeft').val('{"a": [1,2,3],"b":"abc"}');
+    $('#textarearight').val('{"b":"abc","a": [1,3,2]}');
+    $('#ignore-array-order').prop('checked', true);
+
+    jdd.compare();
+
+    assert.ok(jdd.diffs.length === 0, 'Checking for the correct number of differences' );
+
+    $('#textarealeft').val('');
+    $('#textarearight').val('');
+    jdd.setupNewDiff();
+});
 
 QUnit.done(function() {
     $('div.initContainer').hide();