JSFiddle - React, Tailwind, and code Playground
by neonDog
CSS
body {
white-space: pre;
font-family: monospace;
}
JavaScript
const mergeArrayByProperty = (target, source, prop) => {
const result = new Array(source.length).fill({});
source.forEach((sourceElement, i) => {
const targetElement = target.find(targetElement => sourceElement[prop] === targetElement[prop]);
if (targetElement) {
Object.assign(result[i], targetElement, sourceElement);
} else {
result[i] = sourceElement;
}
});
return result;
}
/**
* Check if two arrays are equal
* @param {Array} arr1 The first array
* @param {Array} arr2 The second array
* @return {Boolean} If true, both arrays are equal
*/
const arraysMatch = function (arr1, arr2, jsonCheck=true) {
// Check if the arrays are the same length
if (arr1.length !== arr2.length) return false;
if (jsonCheck) {
return JSON.stringify(arr1) === JSON.stringify(arr2);
}
// Check if all items exist and are in the same order
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
// Otherwise, return true
return true;
};
const diff = function (obj1, obj2, ignore) {
// Make sure an object to compare is provided
if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
return obj1;
}
//
// Variables
//
const diffs = {};
let key;
/**
* Compare two items and push non-matches to object
* @param {*} item1 The first item
* @param {*} item2 The second item
* @param {String} key The key in our object
*/
const compare = function (item1, item2, key) {
// Get the object type
const type1 = Object.prototype.toString.call(item1),
type2 = Object.prototype.toString.call(item2);
// If type2 is undefined it has been removed
if (type2 === '[object Undefined]') {
//diffs[key] = null;
...