来自 URL 的 JSON 数据在 Html 网页中显示 [Object Object]答案

【问题标题】：JSON data from Url showing [Object Object] in Html Webspage来自 URL 的 JSON 数据在 Html 网页中显示 [Object Object]
【发布时间】：2022-01-10 12:47:14
【问题描述】：

我有一个由数据组成的 Json Url，在该数据中我想分别打印“标题、日期和注释，但它只显示 [object object]...

我想打印“事件”列表中包含“标题”、“日期”和“注释”的数据

Json 文件的链接：- https://www.gov.uk/bank-holidays.json

我尝试使用事件/标题，但它也不起作用，我是 javascript 新手，我认为我犯了一个基本错误:(

提前致谢


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GFG User Details</title>

    <!-- INCLUDING JQUERY-->
    <script src=
"https://code.jquery.com/jquery-3.5.1.js">
    </script>

    <!-- CSS FOR STYLING THE PAGE -->
    <style>
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }

        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans',
                'Gill Sans MT', ' Calibri',
                'Trebuchet MS', 'sans-serif';
        }

        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }

        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        td {
            font-weight: lighter;
        }
    </style>
</head>

<body>
    <section>
        <h1>Display Table</h1>

        <!-- TABLE CONSTRUCTION-->
        <table id='table'>
            <!-- HEADING FORMATION -->
            <tr>
                <th>notes</th>
                <th>title</th>
                <th>date</th>
                <th>Division</th>
            </tr>

            <script>
                $(document).ready(function () {

                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("https://www.gov.uk/bank-holidays.json",
                            function (data) {
                        var student = '';

                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {

                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            student += '<tr>';
                            student += '<td>' +
                                value.events + '</td>';

                            student += '<td>' +
                                value.date + '</td>';

                            student += '<td>' +
                                value.notes + '</td>';

                            student += '<td>' +
                                value.division + '</td>'

                            student += '</tr>';
                        });
                        
                        //INSERTING ROWS INTO TABLE
                        $('#table').append(student);
                    });
                });
            </script>
    </section>
</body>

</html>

【问题讨论】：

标签： javascript html json

【解决方案1】：

所以这解决了你的问题@maddy。问题是您正在访问的内容。您必须访问对象内部的事件数组。所以这里是一个示例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GFG User Details</title>

    <!-- INCLUDING JQUERY-->
    <script src=
"https://code.jquery.com/jquery-3.5.1.js">
    </script>

    <!-- CSS FOR STYLING THE PAGE -->
    <style>
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }

        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans',
                'Gill Sans MT', ' Calibri',
                'Trebuchet MS', 'sans-serif';
        }

        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }

        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        td {
            font-weight: lighter;
        }
    </style>
</head>

<body>
    <section>
        <h1>Display Table</h1>

        <!-- TABLE CONSTRUCTION-->
        <table id='table'>
            <!-- HEADING FORMATION -->
            <tr>
                <th>notes</th>
                <th>title</th>
                <th>date</th>
                <th>Division</th>
            </tr>

            <script>
                $(document).ready(function () {
  
                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("https://www.gov.uk/bank-holidays.json",
                            function (data) {
                        
                          var student = '';

                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {
                        
                         
                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            // map the events array in value to have access to the required object
                            $.each(value.events, function(key1, val) {
                            student += '<tr>';
                            student += '<td>' +
                                val.notes + '</td>';
                                student += '<td>' +
                                val.title + '</td>';
                                  student += '<td>' +
                                val.date + '</td>';

                            student += '<td>' +
                                value.division + '</td>'

                            student += '</tr>';
                            });
                        });
                        
                        //INSERTING ROWS INTO TABLE
                        $('#table').append(student);
                    });
                });
            </script>
    </section>
</body>

</html>

【讨论】：

是的，这个对我有用！感谢您的救援jojitoon！ :)

【解决方案2】：

[object object] 是您要获取的数据的数据类型。要获取实际数据，您需要解析 json-data。（解析：解压）

当您通过 Internet 获取某些内容时（至少使用 http-api），您会收到响应，但该响应无法发送 javascript 对象，因此您可以使用函数对其进行字符串化（例如：JSON.stringify(data)） .

Javascript 的内置 JSON 对象具有执行此操作所需的方法。

要在获取此数据时访问此数据，请使用JSON.parse(data)

【讨论】：