JavaScriptでJSON差分ツールを作る方法

function showSuccessAlert(content) {
    const succerAlert = document.getElementsByClassName("alert")[0];
    succerAlert.classList.remove("alert-danger", "d-none");
    succerAlert.classList.add("alert-success");
    succerAlert.textContent = content;
}

function showFailAlert(content) {
    const alertError = document.getElementsByClassName("alert")[0];
    alertError.classList.remove("d-none", "alert-success");
    alertError.classList.add("alert-danger");
    alertError.innerHTML = content;
}

function hideAlert() {
    const alertError = document.getElementsByClassName("alert")[0];
    alertError.classList.add("d-none");
}

function compareDiffJSON(objInputFirst, objInputSecond, path = '') {
    let jsonFirstNull = ``;
    let jsonSecondNull = ``;
    let resultDiff = ``;

    for (let key in objInputFirst) {
      if (!objInputSecond.hasOwnProperty(key)) {
        jsonSecondNull += `  "${path}.${key}"
`;
        continue;
      }
      if (typeof objInputFirst[key] === 'object' && typeof objInputSecond[key] === 'object') {
        const valueDiff = compareDiffJSON(objInputFirst[key], objInputSecond[key], `${path}.${key}`);
        jsonFirstNull +=  valueDiff[0];
        jsonSecondNull += valueDiff[1];
        resultDiff += valueDiff[2];
        continue;
      }
      if (objInputFirst[key] !== objInputSecond[key]) {
        resultDiff += `  "${path}.${key}" is different: "${objInputFirst[key]}" vs "${objInputSecond[key]}"
`;
        continue;
      }
    }

    for (let key in objInputSecond) {
      if (!objInputFirst.hasOwnProperty(key)) {
        jsonFirstNull += `  "${path}.${key}"
`;
      }
    }

    return [jsonFirstNull, jsonSecondNull, resultDiff];
}

function handleJsonDifferent(objInputFirst, objInputSecond) {
    const resultCompare = compareDiffJSON(objInputFirst, objInputSecond,'');

    let jsonFirstNull = resultCompare[0];
    let jsonSecondNull = resultCompare[1];
    let resultDiff = resultCompare[2];

    if (jsonFirstNull === `` && jsonSecondNull == `` && resultDiff == ``) {
        const contentAlert = "The two Json were semantically identical!";
        showSuccessAlert(contentAlert);
        return;
    }

    const valueNull = `  Null
`;

    jsonFirstNull = (jsonFirstNull === ``) ? valueNull : jsonFirstNull;
    jsonSecondNull = (jsonSecondNull === ``) ? valueNull : jsonSecondNull;
    resultDiff = (resultDiff === ``) ? valueNull : resultDiff;

    let contentAlert = `
    Key is missing in the first JSON:

    ${jsonFirstNull}
   

    Key is missing in the second JSON:

    ${jsonSecondNull}
   

    Unequal value:

    ${resultDiff}`;
    showFailAlert(contentAlert);
}

function handleCompare() {
    const firstTextInput = document.getElementsByClassName("first-text-input")[0].value;
    const secondTextInput = document.getElementsByClassName("second-text-input")[0].value;

    if (firstTextInput == "") {
        const contentAlert = "You are not fill in the first data!"
        showFailAlert(contentAlert);
        return;
    }
    if (secondTextInput == "") {
        const contentAlert = "You are not fill in the second data!"
        showFailAlert(contentAlert);
        return;
    }

    let objInputFirst;
    let objInputSecond;
    try {
        objInputFirst = JSON.parse(firstTextInput);
        objInputSecond = JSON.parse(secondTextInput);
    } catch (error) {
        const contentAlert = "Change Parse fail!"
        showFailAlert(contentAlert);
        return;
    }

    handleJsonDifferent(objInputFirst, objInputSecond);
}

function handleDataFile(fileInput, positionAdd) {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const contentFile = event.target.result;
        if (contentFile == "") {
            const index = (positionAdd == "firstTextInput") ? "first" : "second";
            const contentAlert = "File " + index + " does not have data!";
            showFailAlert(contentAlert);
            return;
        }
        document.getElementsByClassName(positionAdd)[0].value = contentFile;
    }
    reader.readAsText(file);
    hideAlert();
}

function handleAddfile() {
    const firstUploadFile = document.getElementsByClassName('first-file-upload')[0];
    const secondUploadFile = document.getElementsByClassName('second-file-upload')[0];

    if (firstUploadFile.files.length != 0) {
        handleDataFile(firstUploadFile, "firstTextInput");
    }
    if (secondUploadFile.files.length != 0) {
        handleDataFile(secondUploadFile, "secondTextInput");
    }
}

document.addEventListener("DOMContentLoaded", function() {
    const btnCompare = document.getElementsByClassName("btn-compare")[0];
    const btnReset = document.getElementsByClassName("btn-reset")[0];
    const btnAddFile = document.getElementsByClassName("btn-add-file")[0];

    btnAddFile.addEventListener('click', function() {
        handleAddfile();
    });

    btnCompare.addEventListener('click', function() {
        handleCompare();
    });

    btnReset.addEventListener('click', function() {
        document.getElementsByClassName("first-text-input")[0].value = "";
        document.getElementsByClassName("second-text-input")[0].value = "";
        firstUploadFile.value = "";
        secondUploadFile.value = "";
        hideAlert();
    });
});