如何從輸入文本區域將 JSON 顯示為 HTML 表

Question

我想用 HTML 顯示 JSON 到表格

但是，如果使用 javascript 從 textarea 獲取值有可能嗎？ 所以我想根據值從 json 顯示到表這是我現在正在運行的腳本

<script>
        var el_up = document.getElementById("prettyJSONFormat").value;
        var list = [
         { "col_1": "val_11", "col_3": "val_13" },
            { "col_2": "val_22", "col_3": "val_23" },
            { "col_1": "val_31", "col_3": "val_33" }
        ];

        var list = JSON.parse(el_up)
        el_up.innerHTML = [];
              
        function constructTable(selector) {
              
            // Getting the all column names
            var cols = Headers(list, selector);  
   
            // Traversing the JSON data
            for (var i = 0; i < list.length; i++) {
                var row = $('<tr/>');   
                for (var colIndex = 0; colIndex < cols.length; colIndex++)
                {
                    var val = list[i][cols[colIndex]];
                      
                    // If there is any key, which is matching
                    // with the column name
                    if (val == null) val = "";  
                        row.append($('<td/>').html(val));
                }
                  
                // Adding each row to the table
                $(selector).append(row);
            }
        }
          
        function Headers(list, selector) {
            var columns = [];
            var header = $('<tr/>');
              
            for (var i = 0; i < list.length; i++) {
                var row = list[i];
                  
                for (var k in row) {
                    if ($.inArray(k, columns) == -1) {
                        columns.push(k);
                          
                        // Creating the header
                        header.append($('<th/>').html(k));
                    }
                }
            }
              
            // Appending the header to the table
            $(selector).append(header);
                return columns;
        }       
</script>

這是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Convert JSON to Table</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<textarea id="prettyJSONFormat" cols=100 rows=20></textarea>
<button onclick = "constructTable('#table')">
        Preview as Table
    </button>

這是我想展示的 json 示例

{
    "Customer":  {
                     "OnSubscription":  true,
                     "Name":  "John",
                     "Surname":  "Smith"
                 },
    "Data":  {
                 "Basket":  [
                                "apples",
                                "pears",
                                "oranges",
                                "strawberries"
                            ]
             }
}

如何從 textarea 獲取值，然后根據值顯示在表格中？

Answer 1

我只使用您的示例數據來展示如何操作。

const list = [
  { col_1: "val_11", col_3: "val_13" },
  { col_2: "val_22", col_3: "val_23" },
  { col_1: "val_31", col_3: "val_33" },
];

下面的例子

 //initialize textarea value document.getElementById("prettyJSONFormat").value = `[{"col_1":"val_11","col_3":"val_13"},{"col_2":"val_22","col_3":"val_23"},{"col_1":"val_31","col_3":"val_33"}] `; function constructTable() { const json = document.getElementById("prettyJSONFormat").value; const list = JSON.parse(json); const tableRows = list.map(el => Object.entries(el).reduce( (a, b) => { a[b[0].slice(b[0].length - 1) - 1] = b[1]; return a; }, ["", "", ""] ) ); const tbody = document.querySelector("#example tbody"); tbody.innerHTML = ""; tableRows.forEach(row => { const tr = document.createElement("tr"); row.forEach(r => { const td = document.createElement("td"); td.textContent = r; tr.appendChild(td); }); tbody.appendChild(tr); }); }

 table, th, td { border: 1px solid black; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Convert JSON to Table</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <textarea id="prettyJSONFormat" cols="50" rows="4"></textarea> <button onclick="constructTable()">Preview as Table</button> <table id="example"> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody></tbody> </table> </body> </html>

如何從輸入文本區域將 JSON 顯示為 HTML 表

問題描述

1 個解決方案

解決方案1
1 已采納 2021-06-29 12:57:24

如何從輸入文本區域將 JSON 顯示為 HTML 表

問題描述

1 個解決方案

解決方案1 1 已采納 2021-06-29 12:57:24

解決方案1
1 已采納 2021-06-29 12:57:24