JSON data from Url showing [Object Object] in Html Webspage

December 4, 2021

I have a Json Url which consists of data and in that data I want to print "title , date and notes separately but it is only showing [object object]…

I want to print data that is present inside the "events" list that have ‘title’ , ‘date’ and ‘notes’

The link to Json file :- https://www.gov.uk/bank-holidays.json

I tried using events/title but it also does not work , I am new in javascript and I think I am doing a basic mistake 🙁

Thanks in advance


<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>

>Solution :

So this solves your problem @maddy.
the issue was the what you were accessing. you had to access the events array inside of the object. so here is a sample

<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>