react native how to iterate over json data and render in component - json

Question

im new to react native and i have been able to fetch json data from server successfully. how do i pass the object into an array and render in my component. Here is my code
i've tried iterating over the object using .map() and i get "undefined is not a function". Ive also tried to convert the object into an array using Object.values and i get error "value for message cannot be cast from readablenativearray to string"
constructor(props) {
super(props);
//useraccountdetails will contain the object from the server
this.state = {
useraccountdetails: [],
}
this.loaduser_account_details= this.loaduser_account_details.bind(this)
}
componentWillMount() {
//this function will fetch the data from the server
this.loaduser_account_details()
}
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.text())
.then((responseJson) => {
var jsonconvertedrows = JSON.parse(responseJson);
var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: finaldata });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}
//alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]
render(){
return (
/**page setup */
<View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>
{/**body */}
<Grid>
{
this.state.useraccountdetails.map((count)=>{
<Text>{count.username}</Text>
})
}
</Grid>
</View>
)
}

Answer 1

It looks like it is because you are iterating over a string in your render. this.state.useraccountdetails is a string once your response is successful as you are setting it as the result stringified. To correct this all you will need to do is correct your setState to
this.setState({ useraccountdetails: jsonconvertedrows });

Answer 2

Can you try the following code?
constructor(props) {
super(props);
//useraccountdetails will contain the object from the server
this.state = {
useraccountdetails: [],
}
this.loaduser_account_details= this.loaduser_account_details.bind(this)
}
componentWillMount() {
//this function will fetch the data from the server
this.loaduser_account_details()
}
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.json())
.then((responseJson) => {
//var jsonconvertedrows = JSON.parse(responseJson);
//var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: responseJson });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}
//alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]
render(){
return (
/**page setup */
<View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>
{/**body */}
<Grid>
{
return this.state.useraccountdetails.map((count)=>{
return(
<Text>{count.username}</Text>
)
})
}
</Grid>
</View>
)
}
You are try to change the response to 'text', please change it from response.text() to response.json()

Answer 3

Change this.setState({ useraccountdetails: Object.values(jsonconvertedrows) }); as shown in code and try it:
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.text())
.then((responseJson) => {
var jsonconvertedrows = JSON.parse(responseJson);
var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: Object.values(finaldata) });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}