String.prototype.replaceAll = function(search, replacement) { var target = this; return target.replace(new RegExp(search, 'g'), replacement); }; Object.prototype.isEmpty = function(item){ if(!item) return true; return Object.keys(item).length === 0; } Object.prototype.isObject = function(item) { return (typeof item === "object" && !Array.isArray(item) && item !== null); } function requestUser(el){ axios.get("https://randomuser.me/api/").then(function(res){ const data = res.data.results[0]; document.getElementById(el).value = JSON.stringify(data, null, 2); }); } function prepare(){ // get textarea values var json1string = document.getElementById("json1").value; var json2string = document.getElementById("json2").value; var diffdiv = document.getElementById("diff"); var json1, json2; // try to parse the text area values into JSON objects try{ //json1 = JSON.parse(json1string.replaceAll("'", '"')); //json2 = JSON.parse(json2string.replaceAll("'", '"')); json1 = eval(`(${json1string})`); json2 = eval(`(${json2string})`); }catch(e){ console.error(e) console.error("Not a JSON!"); return; } var json1diff = compare(json1, json2, {}); var json2diff = compare(json2, json1, {}); var same = Object.isEmpty(json1diff) && Object.isEmpty(json2diff); diffdiv.innerHTML = (same ? "Match":"Mismatch") + "
"; diffdiv.innerHTML += `

JSON1 Extra/Mismatched keys:
${JSON.stringify(json1diff, null, 2).replaceAll(" ", " ").replaceAll("\n", "
") + "
"}

`; diffdiv.innerHTML += `

JSON2 Extra/Mismatched keys:
${JSON.stringify(json2diff, null, 2).replaceAll(" ", " ").replaceAll("\n", "
")}

`; } /** recursively compare JSON entries */ function compare(j1, j2, diff){ /*if(typeof j1 !== 'object' && typeof j2 === 'object' && j1 !== j2){ diff[j1] = j1; return diff; }*/ if(!Object.isObject(j1) && !Object.isObject(j2) && j1 !== j2){ diff[j1] = j1; return diff; } // get arrays of JSON keys var j1keys = Object.keys(j1); var j2keys = Object.keys(j2); // sort both key arrays alphabetically j1keys.sort(function(a, b) {return a.localeCompare(b)}); j2keys.sort(function(a, b) {return a.localeCompare(b)}); // iterate on the keys of j1 for(var i = 0; i < j1keys.length; i++){ var key = j1keys[i]; // if both values are arrays AND are different ==> assign it to the difference object if(Array.isArray(j1[key]) && Array.isArray(j2[key]) && JSON.stringify(j1[key]) !== JSON.stringify(j2[key])){ diff[key] = j1[key]; } // if both values of current entry are objects ==> compare recursively else if(Object.isObject(j1[key]) && Object.isObject(j2[key])){ diff[key] = compare(j1[key], j2[key], {}); } // if at least one of the values is not an object AND the values are different ==> assign it to the difference object else if(j1[key] !== j2[key]){ diff[key] = j1[key]; } } // delete empty entries in the difference object var diffkeys = Object.keys(diff); for(var i = 0; i < diffkeys.length; i++){ var key = diffkeys[i]; if(Object.isEmpty(diff[key])){ delete diff[key]; } } return diff; }

JSON Compare