업로드 된 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>

이 Json 파일을 html로 표시 할 수 있습니다. 하지만 Json 파일의 값에 따라 특정 값을 업데이트하고 싶습니다. 그렇게하는 방법?업로드 된 JSON 파일에 따라 html 파일을 업데이트하는 방법은 무엇입니까?

다음과 같은 것을 원합니다. html 페이지 값은 json 파일 업로드 값으로 업데이트해야합니다. 예를 들어 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 파일을 업데이트하는 방법은 무엇입니까?

답변

관련 문제