ReactJS - Showing Column Name

Question

EDIT

I am completely new to ReactJS, please bear with my stupidity.

Recently I have been playing around with ReactJS and PHP, and currently stuck on map.()

App.Js

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            uNames:[]
        };

        this.submitData = this.submitData.bind(this);
    }
    submitData=()=>{
        fetch('http://localhost/public/api/data.php')
        .then((response) => response.json())
        .then((result) => {
            this.setState({uNames: result});
            console.log(this.state.uNames);
       })
    }
    render(){
        return(
            <div>
                <Button onClick={this.submitData}>Test</Button>
                {this.state.uNames.map((uName, i) => 
                    <Table key={i}>
                        <thead>
                            <td key={uName[i]}>
                                {uName[i]}
                            </td>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                {uName.id}
                                </td>
                                <td>
                                {uName.firstname}
                                </td>
                                <td>
                                {uName.lastname}
                                </td>
                            </tr>
                        </tbody>
                    </Table>
                )}
            </div>
        );
    }
}

PHP

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header("Cache-Control: no-cache");
}

$serverName = "localhost";
$serverUserName = "root";
$serverPassword = "";
$dbName = "test";
$connection = new mysqli ($serverName, $serverUserName, $serverPassword, $dbName);

if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
} 

$sql = "SELECT id, firstname, lastname FROM mydata";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_array()) {
        $arr[] = $row;
        echo json_encode($arr);
    }
} else {
    echo "0 results";
}
$connection->close();
?>

MYSQL(table mydata)

id|firstname|lastname
1 |     John|     Doe

The row data(1,John,Doe) showing just fine, but for the column header(ID, FirstName, LastName), nothing's there.

Is it possible so the column header shows up(it reads dynamically from MySQL table) or it is only possible by setting every single column header as static content?

Can you show an example how the `this.state.uNames` looks like? Thanks! — norbitrial, Mar 07 '20 at 12:38
in my browser console.log() it shows something like this 0: {…} 0: "1" 1: "John" 2: "Doe" firstname: "John" id: "1" lastname: "Doe" : Object { … } length: 1 — mitchiri_neko, Mar 07 '20 at 12:43
As you are not getting header data. you have to make it static. — heisenberg, Mar 07 '20 at 12:57
That what @mayank-pandeyz explained to me. Thanks for the help, really appreciated! — mitchiri_neko, Mar 07 '20 at 12:59

score 0 · Accepted Answer · answered Mar 07 '20 at 12:44

0

According to your code logic and question, uNames is an array of object and you are using map to iterate over array and get individual objects and from which you are showing name etc by this code:

uName.id
uName.firstname

etc and which is working fine. In that case you cant use:

uName[i]

as uName is an object under map and it is having keys like id, firstname etc and not having numeric keys that's why you are not getting anything. I hope this will help you in understanding the problem.

answered Mar 07 '20 at 12:44

Mayank Pandeyz

25,704
4
40
59

Ah, I see! So I can only set the column header as static text. Thanks a lot! – mitchiri_neko Mar 07 '20 at 12:46
@Nicholas You can [iterate over the property/value pairs](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) if you'd like to dynamically create headers and data fields. – 3limin4t0r Mar 07 '20 at 13:59

ReactJS - Showing Column Name

1 Answers1