CODEWITHSUNDEEP
javascriptjquery
NanoNet
NanoNet

Reputation: 324

ajax response not populating INSIDE html <table> tag

Not exactly sure where I went wrong here but I want the content of the response to populate inside the html tags. I'm thinking first I append the table tag, header. Then let the function populate the inside of the table tag. Finally close the table. Something is not right here though.

No errors are being generated. All data is presented to page but just not inside the table tags so that CSS classes can be applied.

HTML BODY

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./assets/javascript/getdata.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">

</head>
<body>
    <div class="page-header">
        <h1>Data Table</h1>
    </div>
    <div id="ufo">ajax_response_goes_here</div>
</body>
</html>

JAVASCRIPT

function displayrecipes() {

    $.ajax({
            type: "GET",
            url: "https://data_url",
            dataType: "json"
        })
        .done(function (response) {

            $('#ufo').append("<table id='ufo-table'>")
            $('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")

            for (var i = 0; i < 10; i++) {

                $('#ufo').append("<tr><td>" + i + "</td><td>" + response[i].spaceships +
                    "</td><td>" + response[i].planets + "</td></tr>")
            }

            $('#ufo').append("</table>")
        })
}

displayrecipes()

Table tabs with none of the response data inside. Instead it seems to appear OUTSIDE of the table tags.

table tab is closed.. but no content inside

Upvotes: 0

Views: 453

Answers (3)

Ayan_84
Ayan_84

Reputation: 665

Instead of appending multiple times, you should declare a variable and appending html to it. upon finishing appending html, you finally should apend the string to div tag.

var content="<table id='ufo-table'>";
    content+="<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>";

        for (var i = 0; i < 10; i++) {

            content+="<tr><td>" + i + "</td><td>" + response[i].spaceships +
                "</td><td>" + response[i].planets + "</td></tr>";
        }
    content+="</table>";
    $('#ufo').append(content);

Upvotes: 1

Faiz Khan
Faiz Khan

Reputation: 298

I think in your for loop you are $("#ufo") instead you should use $("#ufo-table") by doing this you would append table row and table data inside the table then append table inside $("#ufo").

Upvotes: 0

Quentin
Quentin

Reputation: 943643

This creates a table and appends it to #ufo

$('#ufo').append("<table id='ufo-table'>")

This creates a table row and appends it to #ufo

$('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")

If you want your table row inside your table, you have to append it to the table and not the div.

$('#ufo').append("</table>")

This does nothing. jQuery won't construct an element out of an end tag.

Despite the abstraction. You are working with DOM elements, not raw HTML. You can't append a start tag to an element, only another element.

Upvotes: 1

Related Questions