时间戳

首页 > 解决方案 > 比较两个上传的 json 文件

javascript - 比较两个上传的 json 文件

问题描述

我是编码初学者，我正在尝试编写一个代码来比较两个上传的 .JSON 文件，但我不知道如何获取 .JSON 文件的值。

如果我使用 file1.value => 它只是显示文件的路径，如 C://fakepath//

我想获取文件的内容

这是我目前的代码

    <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);

标签： javascriptjsonobject-comparison

解决方案

一旦用户设置了输入，您就可以挖掘文件输入以获取文件内容，如下所示：

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

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

f.filesmultiple如果您在输入上设置属性，则可能包含超过 1 个项目。在您的情况下，您只需要第一项。

您可能还想查看File API

编辑

将您的点击处理程序包装到异步函数中：

// 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)

}

这是一个代码框，它最终应该是什么样子。 https://codesandbox.io/s/comparing-two-uploaded-json-files-39xmp

推荐阅读