JSON data not populating bootstrap table properly

Question

Been trying to get a work around for this for hours now, but I just can't get my bootstrap table to being populated in a correct way. Here is my HTML:

<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" type="text/css">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
    <script src="client.js"></script>



    <table class="table" id="maintable">
            <thead>
              <tr>
                <th data-field="queue">#</th>
                <th data-field="nation_name">Nation</th>
              </tr>
            </thead>
          </table>

</body>


</html>

PHP:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db";

$con = mysqli_connect('localhost','root','','db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"db");
$sql = "SELECT queue, nation_name FROM nations WHERE queue IS NOT NULL ORDER BY queue ASC";
$result = mysqli_query($con, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo json_encode($row);
    }
} else {
    echo "0 results";
}

mysqli_close($con);

?>

JS:

url = "ws://localhost:8080";
ws = new WebSocket(url);

// event emmited when connected
    ws.onopen = function () {
        console.log('websocket is connected ...');
        // sending a send event to websocket server
        ws.send('connected');
    }
    // event emmited when receiving message 
    ws.onmessage = function (ev) {
        console.log(ev.data);
    }

        $.ajax({
                type: 'POST',
                url: 'getqueue.php',
                data: {},
                success: function(response) {
                    alert(response);
                        $(function () {
                            $('#maintable').bootstrapTable({
                                data: response
                            });
                        });

                },
                error: function() {
                    //something
                }
            })

The JSON data that is sent to the page from PHP looks exactly like this:

{"queue":"1","nation_name":"Afghanistan"}{"queue":"2","nation_name":"Sweden"}

But when the page is loaded this is the result: Screenshot

Why is the JSON data not being populated the way I want it? Ie, two rows containing 'queue' and 'nation_name'

Your JSON should look like that : [{"queue":"1","nation_name":"Afghanistan"},{"queue":"2","nation_name":"Sweden"}] otherwise it's incorrect. — Serge K.
– Serge K., Commented Jan 5, 2018 at 15:36
save all the rows in an array variable and echo json_encode once — JoshKisb
– JoshKisb, Commented Jan 5, 2018 at 15:39

Matt S · Accepted Answer · 2018-02-25 16:17:04Z

2

The issue is this code returning multiple JSON strings in one:

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo json_encode($row);
    }
}

Instead you need to build one JSON string as an array of rows, and return it:

if (mysqli_num_rows($result) > 0) {
    $output = array();
    while($row = mysqli_fetch_assoc($result)) {
        $output[] = $row;
    }
    echo json_encode($output);
}

edited Feb 25, 2018 at 16:17

answered Jan 5, 2018 at 15:38

Matt S

15.5k6 gold badges60 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Jovric Over a year ago

Ah, I actually understand haha, thanks a lot. Although this seemed to have pissed of mysql..? mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, array given in D:\xampp\htdocs\getqueue.php on line 18

Alexander Jovric Over a year ago

Thank you, the JSON is now correct. Although my issue still persists.. :( The table still looks like it does in my screenshot, unfortunately.

Matt S Over a year ago

I'm not familiar enough with the bootstrap-table library to know what the next step is to solve your problem.

Daniel Abdelsamed · Accepted Answer · 2018-01-05 16:34:16Z

0

The fix to your next problem is that you are not using the bootstrap library correctly. You must set columns and tell it what fields to use or else it has no idea what to put where. Fix what @Matt S told you to do for the PHP side, then make my edits for the client side. (I'll make an edit in his answer that he can peer review if he wants). On top of setting the columns you can actually get rid of your ajax request entirely as bootstrapTable supports giving it a url directly.

$('#table').bootstrapTable({
    url: 'getqueue.php',
    columns: [{
        field: 'queue',
        title: '#'
    }, {
        field: 'nation_name',
        title: 'Nation'
    }]
});

answered Jan 5, 2018 at 16:34

Daniel Abdelsamed

4982 silver badges11 bronze badges

4 Comments

Alexander Jovric Over a year ago

I understand you, but it didn't work.. :/ Copied your exact code(replaced with correct table id) but the table is still empty. Console says nothing either

Daniel Abdelsamed Over a year ago

OHHH, switch $('#table') to $('#maintable')

Daniel Abdelsamed Over a year ago

Check the console and see if any of the JS libraries aren't load correctly

Alexander Jovric Over a year ago

Heh, yes as I stated in my previous comment, I have checked the log and no errors are being displayed.

Collectives™ on Stack Overflow

JSON data not populating bootstrap table properly

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related