JSON objects not loading properly in Bootstrap table

Question

JSON objects not loading properly in Bootstrap table

I am facing an issue where my ajax script successfully sends JSON objects to the browser, but the table fails to load the JSON object. Here is my Ajax script:

 $.ajax({
            type : "POST",
            url : "getLabels.jsp",
            data : "mailingID=" + selectedValue, // posCodeSelected
            success : function(data) {

                response = $.parseJSON(data);// this statement sends data successfully to the browser

            },
            error : function(response) {
                var responseTextObject = jQuery.parseJSON(response.responseText);
            }
        });

Below is the Bootstrap table embedded into my JSP page:

<table data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="rowNumber" >ID</th>
        <th data-field="firstname" >first name</th>
        <th data-field="lastname" >last name</th>
        <th data-field="organization" >organization</th>
        <th data-field="city" >city</th>
        <th data-field="state" >state</th>

    </tr>
    </thead>
</table>

Also, just to update everyone, this is the JSON response in the browser:

{"rowNumber":1,"mailingID":3,"firstname":"Brian","lastname":"Fairhurst","organization":"Florida State University","city":"Tallahassee","state":"FL"}

javascript ajax json twitter-bootstrap jsp

Answer 1

Answer №1

To incorporate the JSON object data into your table, follow these steps:

// Ensure that your table in the HTML has the id="tbl"

var table = document.getElementById("tbl");

var row = table.insertRow(table.rows.length); // Add a new row

// Insert cells for the new row

cells = [];

for(var i = 0; i < 6; i++){
    cells[i] = row.insertCell(i);
}

// Populate the cells with data from the JSON object

cells[0].innerHTML = response.rowNumber;
cells[1].innerHTML = response.firstname;
cells[2].innerHTML = response.lastname;
cells[3].innerHTML = response.organization;
cells[4].innerHTML = response.city;
cells[5].innerHTML = response.state;

Answer 2

To incorporate the JSON object data into your table, follow these steps:

// Ensure that your table in the HTML has the id="tbl"

var table = document.getElementById("tbl");

var row = table.insertRow(table.rows.length); // Add a new row

// Insert cells for the new row

cells = [];

for(var i = 0; i < 6; i++){
    cells[i] = row.insertCell(i);
}

// Populate the cells with data from the JSON object

cells[0].innerHTML = response.rowNumber;
cells[1].innerHTML = response.firstname;
cells[2].innerHTML = response.lastname;
cells[3].innerHTML = response.organization;
cells[4].innerHTML = response.city;
cells[5].innerHTML = response.state;

Answer 3

Answer №2

The issue arises from the fact that the data in the response is not populating the HTML table as intended. To resolve this, include the data-url attribute within your HTML table.

Instead of:

<table data-height="299" data-show-refresh="true" ...>
    <thead>
    ...

You should utilize:

<table data-height="299" data-show-refresh="true" data-url="response"...>
    <thead>
    ...

Answer 4

The issue arises from the fact that the data in the response is not populating the HTML table as intended. To resolve this, include the data-url attribute within your HTML table.

Instead of:

<table data-height="299" data-show-refresh="true" ...>
    <thead>
    ...

You should utilize:

<table data-height="299" data-show-refresh="true" data-url="response"...>
    <thead>
    ...

JSON objects not loading properly in Bootstrap table

Answer №1

Answer №2

Similar questions

execute numerous queries simultaneously

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Node.js tutorial: Fetching all pages of playlists from Spotify API

What is the best way to apply CSS to a single div without affecting the rest of the code?

Is there a way to utilize jquery to click a submit button within a concealed form?

Guide to inspecting file contents with Node.js

What is the best way to retrieve the name/value pairs from a JSON object

What is the method for inserting data into an array of objects in JavaScript?

Creating an array based on specific conditions being satisfied (Using Javascript)

Toggling the form's value to true upon displaying the popup

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

The database does not get updated by an Ajax request without a page refresh

Utilizing Laravel's Eloquent ORM to filter columns containing JSON data

Struggling to generate fresh vue components

Changing the user object stored in the database within the next authentication process following registration

Using jQuery to select elements with specific innerHTML values

Select the text inside the current cell of a jqGrid table

How to retrieve the value of a selected radio button in an AngularJS radio button group that uses ng-repeat

Update information without the need for an xhr request in the back-end using jQuery

Is there a way to showcase a modal following a timed delay?