React Native : render a fetched data structure - json

Question

I am new to Javascript (NodeJS & JSON data structure) and React native, and I am trying to display some datas on the iOS screen test (react native). I did my best to understand but I am stuck.
I made a GET route on my Express app at /places on localhost:3000 :
router.get('/places', (req, res) => {
MongoClient.connect(url, function (err, db) {
if (err) {
console.log('Unable to connect to the mongoDB server. Error:', err);
} else {
console.log('Connection established to', url);
var colPlaces = db.collection('places');
colPlaces.find().toArray(function (err,result) {
if (err) {
res.send('error!');
} else if (result.length) {
res.send(result);
} else {
res.send('No entries');
}
})
db.close();
}});
})
It displays a data structure on my browser (seems to be an Array of JSON objects ?)
[
{"_id":"5894fdd694f5d015dc0962bc","name":"The good bar","city":"London"},
{"_id":"5894fdd694f5d015dc0962bd","name":"Alpha bar","city":"Paris"}
]
I am then trying to render it on my native react project :
constructor(props) {
super(props);
var datas = async function getDatas() {
try {
let response = await fetch('http://localhost:3000/places');
let responseJson = await response.json();
return responseJson;
} catch(error) {
console.error(error); }
}
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(datas())
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
But all I got is two "0" on my screen.
Can someone help me to find out what is wrong ?
What is/are,
* "result" variable structure ? seems to be an array of JS objects.
* "response" and "responseJSON" variables ?
* "datas()" and dataSource type
Should I parse something ? I am a bit confuse. Thank you.

Answer 1

First, "data" is already plural, there is no "datas". :) Now back to your question, getData is async function, so you cannot just call getData() and expect it to return data immediately. In the constructor, set dataSource to empty list, then:
async function getData() {
try {
let response = await fetch('http://localhost:3000/places');
return response.json(); // this call is not async
} catch(error) {
console.error(error);
}
}
componentDidMount() {
let data = await this.getData();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({dataSource: ds.cloneWithRows(data)});
}