Comparing two uploaded json files

Question

Comparing two uploaded json files

929 Views Asked by Bernard At 11 November 2021 at 03:47

I'm a beginner at coding and I'm trying to make a code to compare two uploaded .JSON files but I'm stuck as to how to get the value of the .JSON file.

If i use file1.value => its just showing the path of the file like C://fakepath//

I want to get the content of the files

Here is my code at the moment

    <input type="file" id="file1" name="file1">
      <input type="file" id="file2" name="file2">
      <button class="check">check</button>

      <div class="output-container">
        <pre id="output1"></pre>
        <pre id="output2"></pre>
      </div>

   
const file1 = document.querySelector("#file1");
const file2 = document.querySelector("#file2");
const check = document.querySelector('.check');

check.addEventListener('click', compare);

// let json1, json2 = false;

file1.addEventListener("change", function () {
  let fr = new FileReader();
  const output1 = document.getElementById("output1");

  fr.onload = function () {
    output1.textContent = fr.result;
  };

  fr.readAsText(this.files[0]);
});

file2.addEventListener("change", function () {
  let fr = new FileReader();
  const output2 = document.getElementById("output2");

  fr.onload = function () {
    output2.textContent = fr.result;
  };

  fr.readAsText(this.files[0]);
});


function getDifference(o1, o2) {
  var diff = {};
  var tmp = null;
  if (JSON.stringify(o1) === JSON.stringify(o2)) return true;

  for (var k in o1) {
    if (Array.isArray(o1[k]) && Array.isArray(o2[k])) {
      tmp = o1[k].reduce(function(p, c, i) {
        var _t = getDifference(c, o2[k][i]);
        if (_t)
          p.push(_t);
        return p;
      }, []);
      if (Object.keys(tmp).length > 0)
        diff[k] = tmp;
    } else if (typeof(o1[k]) === "object" && typeof(o2[k]) === "object") {
      tmp = getDifference(o1[k], o2[k]);
      if (tmp && Object.keys(tmp) > 0)
        diff[k] = tmp;
    } else if (o1[k] !== o2[k]) {
      diff[k] = o2[k]
    }
  }
  return diff;
}

// var d = getDifference(output1.textContent, output2.textContent);
// console.log(d);

// console.log(output1);
// console.log(output2.textContent);

Original Q&A

There are 2 best solutions below

Raju Ahmed On 11 November 2021 at 05:08

Here I've two JSON data files and both contain the same following values.

FirstFile.json

[
  {
    "name": "Raju Ahmed",
    "age": 32,
    "country": "Bangladesh"
  }
]

SecondFile.json

[
  {
    "name": "Raju Ahmed 2",
    "age": 32,
    "country": "Bangladesh"
  },
  {
    "name": "Raju Ahmed 2",
    "age": 32,
    "country2": "Bangladesh"
  }
]

First I loaded two files. Then read the data in a different textarea (read-only mode). Then compare if both files are matched or not. You can also check it LIVE from here.

<!DOCTYPE html>
<html>
<head>
  <style>
     table, td, th {
     border: 1px solid black;
     }
     table {
     width: 100%;
     border-collapse: collapse;
     }
  </style>
</head>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
 <fieldset>
    <h2>Json File</h2>
    <table >
       <thead>
          <tr>
             <th>Select First File</th>
             <th>First File Value</th>
             <th>Select Second File</th>
             <th>Second File Value</th>
             <th>Load File</th>
             <th>Compare</th>
          </tr>
       </thead>
       <tr>
          <td><input type='file' id='fileinput'></td>
          <td><textarea readonly disabled id="fileOneData" name="fileOneData" placeholder="First File Data"></textarea></td>
          <td><input type='file' id='fileinput2'>    </td>
          <td><textarea readonly disabled id="fileTwoData" name="fileTwoData" placeholder="Second File Data"></textarea></td>
          <td><input type='button' id='btnLoad' value='Load' onclick='loadFile()'></td>
          <td><input type='button' id='btnCompare' value='Compare' onclick='Compare()'></td>
       </tr>
    </table>
 </fieldset>
</form>
<script type="text/javascript">
 function Compare(){
  var fileOneData = document.getElementById("fileOneData").value;
  var fileTwoData = document.getElementById("fileTwoData").value;
  
  var compareResult= JSON.stringify(fileOneData)===JSON.stringify(fileTwoData);
  if(compareResult){
    alert("Both file matched");
  }
  else{
    alert("Both file not matched");
  }
 }
 
  function loadFile() {
    var input, file, fr;
    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }
 
    input = document.getElementById('fileinput');
    input2 = document.getElementById('fileinput2');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
 else if(!input2){
    alert("Um, couldn't find the fileinput 2 element.");
 }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
 else if (!input2.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs 2.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
 else if (!input2.files[0]) {
      alert("Please select a file 2 before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
   
   file2 = input2.files[0];
      fr2 = new FileReader();
      fr2.onload = receivedText2;
      fr2.readAsText(file2);
    }
 
    function receivedText(e) {
      let lines = e.target.result;
      var newArrOne = JSON.parse(lines);
      document.getElementById('fileOneData').value=lines;     
   
    }
 
  function receivedText2(e) {
      let lines = e.target.result;    
      var newArrTwo = JSON.parse(lines); 
   document.getElementById('fileTwoData').value=lines
    }
  }
</script>
</body>
</html>

Note: If also need to compare data also let me know.

**Steve** · Accepted Answer · 2021-11-11T04:36:13.273000

Once the user has set the input, you can dig into the file input to get the file contents like this:

const f = document.querySelector("#file1")

f.files[0].text().then((data) => {
    console.log(data)
})

f.files might contain more than 1 item if you set the multiple attribute on the input. In your case, you just want the first item.

You might also like to look into the File API

Edit

Wrap your click handler into an async function:

// Assign compare function to event listener
const check = document.querySelector(".check");
check.addEventListener('click', compare);

const compare = async () => {

    // Get file inputs
    const file1 = document.querySelector("#file1");
    const file2 = document.querySelector("#file2");

    // Get the file contents by awaiting the promise to resolve
    const contents1 = await file1.files[0].text()
    const contents2 = await file2.files[0].text()

    const difference = getDifference(o1, o2)

}

Here is a codesandbox of what it should look like in the end. https://codesandbox.io/s/comparing-two-uploaded-json-files-39xmp

Comparing two uploaded json files

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JSON

Related Questions in OBJECT-COMPARISON

Trending Questions

Popular # Hahtags

Popular Questions