无法获取HTML表以显示来自API的数据

Question

I followed a tutorial that fetches JSON data from an API and renders this into a table, but when I press the 'Create table' button the table doesn't show up. 我遵循了一个教程，该教程从API提取JSON数据并将其呈现到表中，但是当我按下“创建表”按钮时，该表未显示。 The 'Create JSON Data' button however is functional and creates dummy data as a test to show in the table, the 'Create Table' button is also working but just doesn't show the table. 但是，“创建JSON数据”按钮可以正常工作，并且可以创建虚拟数据作为测试以显示在表格中，“创建表格”按钮也可以使用，但不显示表格。

Could it be document.GetElementById, var tbl = js.CreateTable, or var tbl = js.CreateTable causing the problem? 可能是document.GetElementById，var tbl = js.CreateTable或var tbl = js.CreateTable引起了问题？

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>JSON to Table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js" type="text/javascript"></script>

    <script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.6/chance.min.js" type="text/javascript"></script>

<body>
    <div id="jsonData">
    <button type="button" class="btn btn-primary CreateJSON">Create JSON Array</button>
    <button type="button" class="btn btn-primary CreateMyTable">Create Table</button>
</div>
</body>

<script>


    $(document).ready(function($)
    {
        function CreateJSONArray()
        {
        var total_rows = 10;

        console.time('create_json_array')
        var arr = []
        for (var i = 0; i < total_rows; i++)
        {
            arr.push({
                "id": i +1,
                "first_name": chance.first(),
                "email": chance.email({domain: 'gmail.com'}),
                "ip_address": chance.ip(),
            })
        };
        console.timeEnd('create_json_array')
        return arr;
        document.getElementById(CreateJSONArray)
    }

    $(document).on('click', '.CreateJSON', function(event)
    {
        event.preventDefault();
        var data = CreateJSONArray();
        console.log(data);
    });

    $(document).on('click', '.CreateMyTable', function(event)
    {
        event.preventDefault();
        var data = CreateJSONArray();
        //var tbl = js.CreateTable(data);
        var tbl = js.CreateTable(data,['Line Num','First Name','User Emails','IP Address']);

        $('.MyTable').html(tbl);
    });

});
</script>

</head>


</html>

Answer 1

You need to have a table tag in your body , so something like: 您的body需要有一个table标签，所以类似：

<table class="MyTable"></table>

Don't forget to use the same class as you specify in you js, in this case MyTable since $('.MyTable').html(tbl) . 不要忘记使用与js中指定的类相同的类，在本例中为MyTable因为$('.MyTable').html(tbl) 。

无法获取HTML表以显示来自API的数据

问题描述

1 个解决方案

解决方案1
0 2019-07-23 09:08:56

无法获取HTML表以显示来自API的数据

问题描述

1 个解决方案

解决方案1 0 2019-07-23 09:08:56

解决方案1
0 2019-07-23 09:08:56