Summary
I'm attempting to make a blog using React with JSON data.
When I console.log(this.state.blogs) I receive the output of: [object Object],[object Object],[object Object].
I've tried to use the .map function but am unsure of how to with JSON data.
My key would be "blog_text" as that is how I'm encoding it back to React.
So far all I've been able to do is access different items in the object array by printing out this.state.blogs[0]. I'm unsure of how to apply the dot operator or .map function to this array. I've searched on Stack Overflow but it doesn't apply to the way I'm saving my JSON. Does anybody have a suggestions? Thank you in advance.
Google Chrome Console Output
React LoginForm Class
var LoginForm = React.createClass({
getInitialState: function() {
return {
username: 'alexa',
password: '1234',
blogs: {}
};
},
componentDidMount: function() {
ajax('obtain_blogs.php', null, function(response) {
if (response.result === 'error') {
alert('Error: ' + response.msg);
} else if (response.result === 'success') {
console.log("success");
console.log("Response.blogtext: " + response.blogtext);
console.log("Response.blogtext[0]: " + response.blogtext[0]);
this.setState({ blogs: response.blogtext, loading: false});
//this.props.getBlogs(response.blogtext);
} else {
alert("Response message has no result attribute");
}
}.bind(this));
},
onUsernameChange: function(e) {
this.setState({ username: e.target.value });
},
onPasswordChange: function(e) {
this.setState({ password: e.target.value });
},
onSubmit: function(e) {
ajax('login.php', {username: this.state.username, password: this.state.password },
function(response) {
if (response.result === 'failure') {
alert('Bad username or password');
}
else if (response.result === 'success') {
this.props.onLogin(response.counter);
}
else if (response.result === 'error') {
alert('Error: ' + response.msg);
}
else {
alert('Response message has no result attribute.');
}
}.bind(this));
},
render: function() {
var blog_entries = this.state.blogs.toString();
console.log("Blog Entries: " + blog_entries);
var key = "blog_text";
console.log("this.state.blogs typeof: " + typeof(this.state.blogs));
return (
<div>
<h1>Single Blog System</h1>
<hr></hr>
Username: <input type="text" onChange={this.onUsernameChange} value={this.state.username} /> <br></br>
Password: <input type="password" onChange={this.onPasswordChange} value={this.state.password} /> <br></br>
<input type="submit" onClick={this.onSubmit} value="Login" /> <br></br>
<hr></hr>
<h2>Blogs:</h2>
<div>
{this.state.blogs}
</div>
</div>
);
}
});
Obtain_Blogs.php
<?php
# update_click will connect to the database and then update the counter
# variable to the database.
# Global Declaration for all "try" blocks to have access.
$servername = "************";
$dbusername = "************";
$dbpassword = "************";
$dbname = "************";
$tablename = "************";
# Checks the connection with the database.
try
{
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbusername, $dbpassword);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql= "SELECT blog_text FROM users";
$stmt = $conn->prepare($sql);
$json=json_encode($stmt);
$stmt->execute();
if ($stmt->rowCount() == 0){
$response = array('error' => 'Did not find blogs');
print(json_encode($response));
exit();
}
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e)
{
$response = array('result' => 'error', 'msg' => $e->getMessage());
print(json_encode($response));
console.log("my error. message is %s", $e);
exit();
}
$response = array('result' => 'success', 'blogtext' => $row);
print(json_encode($response));
?>
