How do I get the json nested object? - json

Question

I am new to React Native, and want to get the nested object from json. Here is my code. And I can get succesfuly data.phone but always get this if I try to get data.name.title or etc.
undefined is not an object
Here is my code.
class Dictionary extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
fetch('http://api.randomuser.me/?results=50')
.then((response) => response.json())
.then((responseJson) => {
//return responseJson.movies;
console.log( responseJson.results );
this.setState({
dataSource: ds.cloneWithRows(responseJson.results),
loaded:false,
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View
style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<View>
<Text>
{data.phone}
</Text>
<Text>
{data.name.title}
</Text>
</View>
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</View>
);
}
}
How can I get the name.title?
Thanks
And here is the json data from randomuser.me
{"results":[{"gender":"female","name":{"title":"miss","first":"abby","last":"perkins"},"location":{"street":"9542 highfield road","city":"ely","state":"herefordshire","postcode":"J9 2ZJ"},"email":"abby.perkins#example.com","login":{"username":"redcat541","password":"1026","salt":"LIsOByBg","md5":"2890bf50a87289f7f3664840e2c47fe3","sha1":"1944896ba6cc78ad32dcf927dc5c9226d2f9e050","sha256":"9013be19c91195788009cc545f8a2be4494687dc29b155513022ce9157b73785"},"dob":"1959-05-20 07:03:41","registered":"2006-07-10 01:28:56","phone":"0101 716 4694","cell":"0738-649-138","id":{"name":"NINO","value":"BC 35 80 42 Q"},"picture":{"large":"https://randomuser.me/api/portraits/women/54.jpg","medium":"https://randomuser.me/api/portraits/med/women/54.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/54.jpg"},"nat":"GB"}],"info":{"seed":"2e632bbc13c85cb2","results":1,"page":1,"version":"1.1"}}
when I console.log(data.name) I get this {"title":"miss","first":"abby","last":"perkins"} and so on on every Iteration i get different names. So i guess there is no need in data[0] - it looks like everything is ok with getting the proper data object. just need to access data.name.title but no luck with it. Sorry, it pretty confusing for me this time as every prev time there were no problems with any json obj or array

Answer 1

This is caused by the constructor, but I don't know why.
Just pass an empty array and it will work.
this.state = {
dataSource: ds.cloneWithRows([])
};
You can do this too:
this.state = {
dataSource: ds.cloneWithRows([{name: "Ahmed"}])
};
See here for more information:
https://facebook.github.io/react-native/docs/listviewdatasource.html#clonewithrows

Answer 2

Its because your {data.name.title} is directly in view tag. Place that in <Text> component like this:
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<View>
<Text>
{data.phone}
</Text>
<Text>
{data.name.title}
</Text>
</View>
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>