Question

我的json文件现在以这种格式存储来自html表单的数据。该数据将在新人填写html表单时更新。

{
"name": "donald",
"age": "34",
"gender": "male",
"email": "e@m.l",
 }

我试图调用它以将其形成为html表，但我不知道如何调用它。例如，就我所用的Google而言，几乎所有的网站都以“ var member =”开头给出了硬编码的json文件。

Answer 1

如果您有json文件，则可以使用module.exports = mongoose.model('FindMyLocation', FindMyLocation );来获取该文件并将对象附加到表中。这是一个非常简单的示例供您参考：

<section>
  <div class="video-intro">
    <div class="image">
      <div class="play-button btn"></div>
      <a href="#" id="btn_play" class="btn">
        <img src="http://placekitten.com/960/540" alt="play video" />    
      </a>
    </div>
    <iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=57c0d4" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</section>

section {
  display:grid;
  grid-template-columns:10vw 500px;
  margin-top:300px;
}

/* video intro */
.video-intro {
  grid-column: 2 ;
  box-shadow:0px 0px 7px #ddd;
  margin:0 auto 50px !important;
  width:90%;
  position:relative;
  max-width:960px;

.image {
  position:absolute;
  top:0;
  left:0;
  z-index:20;

img {
  width:100%;
  height:auto;
}

Answer 2

尝试此代码。您必须使用Loop

将 JSON数据推入 HTML

 for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

col 已具有json数据。所以我可以将数据追加到表中

<!DOCTYPE html>
    <html>
    <head>
        <title>Convert JSON Data to HTML Table</title>
        <style>
            table, th, td 
            {
                margin:10px 0;
                border:solid 1px #333;
                padding:2px 4px;
                font:15px Verdana;
            }
            th {
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
        <div id="showData"></div>
    </body>
    
    <script>
        function CreateTableFromJSON() {
            var myBooks = [
                {
                    "Book ID": "1",
                    "Book Name": "Computer Architecture",
                    "Category": "Computers",
                    "Price": "125.60"
                },
                {
                    "Book ID": "2",
                    "Book Name": "Asp.Net 4 Blue Book",
                    "Category": "Programming",
                    "Price": "56.00"
                },
                {
                    "Book ID": "3",
                    "Book Name": "Popular Science",
                    "Category": "Science",
                    "Price": "210.40"
                }
            ]
    
            // EXTRACT VALUE FOR HTML HEADER. 
            // ('Book ID', 'Book Name', 'Category' and 'Price')
            var col = [];
            for (var i = 0; i < myBooks.length; i++) {
                for (var key in myBooks[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }
    
            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
    
            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
    
            var tr = table.insertRow(-1);                   // TABLE ROW.
    
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }
    
            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < myBooks.length; i++) {
    
                tr = table.insertRow(-1);
    
                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = myBooks[i][col[j]];
                }
            }
    
            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    </script>
    </html>

如何在不使用变量的情况下将json文件数据转换为html表？

2 个答案: