如何根據上傳的JSON文件更新html文件？

-1

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>File API</title> 
    <link rel="stylesheet" href="style.css"> 
    <script> 
     window.onload = function() { 
     var fileInput = document.getElementById('fileInput'); 
     var fileDisplayArea = document.getElementById('fileDisplayArea'); 


     fileInput.addEventListener('change', function(e) { 
     var file = fileInput.files[0]; 
     var reader = new FileReader(); 

     reader.onload = function(e) { 
      JsonObj = JSON.parse(e.target.result); 
      fileDisplayArea.innerHTML = e.target.result; 
     }   
     reader.readAsText(file); 
     }); 
} 
</script> 
</head> 
<body> 
    <div id="page-wrapper"> 

     <h1>Text File Reader</h1> 
     <div> 
      Select a text file: 
      <input type="file" id="fileInput"> 
     </div> 
     <pre id="fileDisplayArea"><pre> 

    </div> 

    <h1>Cricketer Details</h1> 
    <table class = "table"> 
    <tr> 
    <th>Name</th> 
    <th>Country</th> 
    </tr> 
    <tr> 
    <td><div id = "Name">Sachin</div></td> 
    <td><div id = "Country">India</div></td> 
    </tr> 
</table> 

     <div class = "central"> 
     <button type = "button" onclick = "loadJSON()">Update Details </button> 
     </div> 
</body> 
</html>

在這個無法在html中顯示Json文件。但我想根據Json文件中的值更新某些值。怎麼做？如何根據上傳的JSON文件更新html文件？

我想要下面的東西。應該使用json文件上傳的值更新html頁面值。例如，應根據json文件更新名稱和國家/地區。如何做那個綁定？

<h1>Cricketer Details</h1> 
    <table class = "table"> 
    <tr> 
    <th>Name</th> 
    <th>Country</th> 
    </tr> 
    <tr> 
    <td><div id = "Name">Sachin</div></td> 
    <td><div id = "Country">India</div></td> 
    </tr> 
</table> 

     <div class = "central"> 
     <button type = "button" onclick = "loadJSON()">Update Details </button> 
     </div>

Myjson

{ 
    "name": "XXXX", 
    "country": "India", 
}

任何人請告訴我如何修改這顯示JSON數據。非常感謝！

來源

2016-12-16 radiance88

您能否提供更多信息？使用你的代碼，我能夠顯示JSON內容。你對顯示和條件有什麼特殊要求？也許你的JSON數據樣本也會有用。 – Blablalux

@Blablalux嗨，對不起。現在我更新了我所需要的內容。你可以請它坐下嗎？ – radiance88

<html> 
<body> 

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post"> 

    <fieldset> 
    <h4>Upload Json File</h4> 
    <input type='file' id='fileinput'> 
    <input type='button' id='btnLoad' value='Load' onclick='loadFile();'> 
    </fieldset> 
</form> 


<script type="text/javascript"> 

    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'); 
    if (!input) { 
     alert("Um, couldn't find the fileinput element."); 
    } 
    else if (!input.files) { 
     alert("This browser doesn't seem to support the `files` property of file inputs."); 
    } 
    else if (!input.files[0]) { 
     alert("Please select a file before clicking 'Load'"); 
    } 
    else { 
     file = input.files[0]; 
     fr = new FileReader(); 
     fr.onload = receivedText; 
     fr.readAsText(file); 
    } 

    function receivedText(e) { 
     lines = e.target.result; 
     var newArr = JSON.parse(lines); 
     document.getElementById("Name").innerHTML = newArr.name; 
     document.getElementById("Country").innerHTML = newArr.country; 
    } 
    } 
</script> 
<h1>Cricketer Details</h1> 

     <table class = "src"> 
     <tr><th>Name</th><th>Country</th></tr> 
     <tr><td><div id = "Name">Sachin</div></td> 
     <td><div id = "Country">India</div></td></tr> 
     </table> 



</body> 
</html>

來源

2016-12-16 15:02:55 radiance88

如何根據上傳的JSON文件更新html文件？

回答

相關問題