我是編碼初學者，我正在嘗試撰寫代碼來比較兩個上傳的 .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.files[0].text().then((data) => {
output1.textContent = data;
});
file2.files[0].text().then((data) => {
output2.textContent = data;
});
const compare = async() => {
const file1 = document.querySelector("#file1");
const file2 = document.querySelector("#file2");
const contents1 = await file1.files[0].text();
console.log(contents1);
const contents2 = await file2.files[0].text();
console.log(contents2);
const difference = getDifference(o1, o2);
console.log(difference);
}
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;
}
uj5u.com熱心網友回復：
一旦用戶設定了輸入，您就可以深入檔案輸入以獲取檔案內容，如下所示：
const f = document.querySelector("#file1")
f.files[0].text().then((data) => {
console.log(data)
})
f.files如果您multiple在輸入上設定屬性，則可能包含 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
uj5u.com熱心網友回復：
這里我有兩個 JSON 資料檔案，它們都包含以下相同的值。
第一個檔案.json
[
{
"name": "Raju Ahmed",
"age": 32,
"country": "Bangladesh"
}
]
第二檔案.json
[
{
"name": "Raju Ahmed 2",
"age": 32,
"country": "Bangladesh"
},
{
"name": "Raju Ahmed 2",
"age": 32,
"country2": "Bangladesh"
}
]
首先我加載了兩個檔案。然后讀取不同textarea中的資料（只讀模式）。然后比較兩個檔案是否匹配。您也可以從這里實時查看。
<!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>
注意：如果還需要比較資料也讓我知道。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/355737.html
標籤：javascript json 对象比较
上一篇：如何將呼叫條件更改為開關盒