我如何在 html 页面上显示我的 json 数据

Question

i want to display the json data the user has put in, but it isn't showing anything.我想显示用户输入的 json 数据，但没有显示任何内容。 when i press the button nothing happens.当我按下按钮时，没有任何反应。 my json file is named varer.json.我的 json 文件名为 varer.json。 i want to show all the json data in a tabel when i press the button.当我按下按钮时，我想在表格中显示所有 json 数据。 I dont get an error, there is just nothing that happens, can it be something with the fetch???我没有收到错误，没有发生任何事情，这可能与获取有关吗？ please help请帮忙

here is my javascript这是我的 javascript

function showData() {
    console.log("Showing Data")
    
    // var mainData = document.getElementById("jsonData");
    // mainData.innerHTML="hello"

    fetch("varer.jsom")
    .then(response => {
        resp = response.json()
        return resp
    })
    .then(resp => {
        appendData(resp)    
    })
}

function appendData(resp){
    console.log(resp)

    var mainDiv = document.getElementById("jsonData");

    for (i=0; i< resp.length; i++)
    {
        var nameDiv = document.createElement("div")
        nameDiv.className="collapsible"
        nameDiv.innerHTML = "Name: " + resp[i].varer
        
        var ageDiv = document.createElement("div")
        ageDiv.className="content"
        ageDiv.innerHTML = "Age: " + resp[i].pris

        var picture = document.createElement("div")
        picture.className="content"
        picture.innerHTML = "Age: " + resp[i].billede
        
        

        mainDiv.appendChild(nameDiv)
        mainDiv.append(ageDiv)
        mainDiv.append(picture)

        nameDiv.addEventListener("click", function() {
            
            this.classList.toggle("active");
            
            var content = this.nextElementSibling;
            
            if (content.style.display === "block") {
              content.style.display = "none";
            } else {
              content.style.display = "block";
            }

            // if (content.style.maxHeight){
            //     content.style.maxHeight = null;
            //   } else {
            //     content.style.maxHeight = content.scrollHeight + "px";
            //   }

          });

    }
}

Here is my html.这是我的 html。

<html>
  <head>
    <script type="module" src="varer.js"></script>
    <title>JSON Test</title>
  </head>
  <body>
    <div class="title">Expand / Collapse JSON</div>

        <div id="jsonData">
            
        </div>
    <h1>Varer</h1>
    <form id="form">
        <input placeholder="Varer" id="varer" />
        <input placeholder="pris" id="pris" />
        <input type="file" id="billede" name="img" accept="image/*">
        <input value="Submit" type="submit" id= "submit" />
        <button onclick="showData()">Click me</button>    </form>
    <form id="delete">
      <input value="Delete" type="submit" />
    </form>
  </body>
</html>

Answer 1

The problem turns out to be with your JSON - those backslashes are killing it.问题出在你的 JSON 上——那些反斜杠正在扼杀它。 You need to backslash your backslashes (escape them) so the JSON parser doesn't misread them as escaping other characters (as mentioned in this article: JSON Parsing error with backslash您需要反斜杠（转义它们），以便 JSON 解析器不会将它们误读为 escaping 其他字符（如本文所述： Z0ECD11C1D7A287401D148A23BBD7

[{"varer":"fff","pris":"333","billede":"C:\\\\fakepath\\\\Konkurrence.png"}]

 function appendData(resp) { console.log(resp) var mainDiv = document.getElementById("jsonData"); for (i = 0; i < resp.length; i++) { var nameDiv = document.createElement("div") nameDiv.className = "collapsible" nameDiv.innerHTML = "Name: " + resp[i].varer var ageDiv = document.createElement("div") ageDiv.className = "content" ageDiv.innerHTML = "Age: " + resp[i].pris var picture = document.createElement("div") picture.className = "content" picture.innerHTML = "Age: " + resp[i].billede mainDiv.appendChild(nameDiv) mainDiv.append(ageDiv) mainDiv.append(picture) nameDiv.addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } // if (content.style.maxHeight){ // content.style.maxHeight = null; // } else { // content.style.maxHeight = content.scrollHeight + "px"; // } }); } } let json = '[{"varer":"fff","pris":"333","billede":"C:\\\\fakepath\\\\Konkurrence.png"}]'; json = JSON.parse(json) appendData(json)

 <div class="title">Expand / Collapse JSON</div> <div id="jsonData"> </div> <h1>Varer</h1> <form id="form"> <input placeholder="Varer" id="varer" /> <input placeholder="pris" id="pris" /> <input type="file" id="billede" name="img" accept="image/*"> <input value="Submit" type="submit" id="submit" /> <button onclick="showData()">Click me</button> </form> <form id="delete"> <input value="Delete" type="submit" /> </form>

我如何在 html 页面上显示我的 json 数据

问题描述

1 个解决方案

解决方案1
0 2021-11-27 19:21:55

我如何在 html 页面上显示我的 json 数据

问题描述

1 个解决方案

解决方案1 0 2021-11-27 19:21:55

解决方案1
0 2021-11-27 19:21:55