Jump to content

Data not showing properly in correct header


Go to solution Solved by mac_gyver,

Recommended Posts

I am trying to display data from the php file to be in the correct headers, yet its going downwards instead of going across

The php file

<?php

$a = array(11,24,3,44,58,16);
// var_dump($a);
// print_r($a)
echo json_encode($a);
?>

 

The Javascript snippet

if (ajaxReturn(xhr) == true) {
              const response = JSON.parse(xhr.responseText);
            // console.log(xhr.responseText)
            //   document.getElementById('read').innerHTML = response
              let table = ''
              console.log(table)
              for(let i = 0; i < response.length; i++){
                let num = response[i]
                console.log(num)
                // concantenate with table elements
                table += '<tr>'
                    // table += '<td>' + num + '</td><td>Some random text</td>'
                    table += '<td>' + num + '</td>'
                table += '</tr>'
              }
              // add to the table html elements and displays data
              document.getElementById('data').innerHTML = table
            }

The html table

<div id="read">
        <table>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
            </tr>
            <tbody id="data"></tbody>
        </table>
    </div>

 

data.png

  • Solution

the code is doing exactly what it was written to do, build a <tr><td>num</td></tr> for each number. if you want to produce a single <tr></tr>, you would need to add the opening <tr> before the start of the looping and add the closing </tr> after the end of the looping.

  • Like 2

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.