Multi tool use

How would I access this JSON file using React Native

I have a functioning react native app that uses a tab bar. On my current version, I can make it display a flat list from VSON that I found from a youtube video. I want to use my own JSON list now, but I'm having issues.

Here's a link to the online JSON file: api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8

Here's my code for the specific file I'm working on that I got from the youtube video (this works and displays a list of names). Please note this is a tab in my tab bar:

My question is what do I need to set
this.setState({ data: json.results })
to, and then what do I set

{${item.name.first} ${item.name.last}}
}

${item.name.first} ${item.name.last}

if I just wanted to display medicationCodeableConcept

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
FlatList
} from "react-native";

import { Icon } from 'native-base'


class LikesTab extends Component {

//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
state = {
data:
};

componentWillMount() {
this.fetchData();
}

//Getting the data
fetchData = async () => {
const response = await fetch("https://randomuser.me/api?results=500");
const json = await response.json();
this.setState({ data: json.results });
};

//var customData = require('./customData.json');


//Setting what is shown
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i}
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>}
/>
</View>
);
}
}
export default LikesTab;

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});


Here's my current code that just shows a blank screen:

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
FlatList
} from "react-native";

import { Icon } from 'native-base'


class LikesTab extends Component {

//SETTING THE STATE MAKING AN EMPTY ARRAY WHICH WE FIL
state = {
data:
};

componentWillMount() {
this.fetchData();
}

//Getting the data
fetchData = async () => {
const response = await fetch("api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8");
const json = await response.json();
this.setState({ data: json.results });
};

//var customData = require('./customData.json');


//Setting what is shown
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i}
renderItem={({ item }) =>
<Text>
{`${item.entry.medicationCodeableConcept}`}
</Text>}
/>
</View>
);
}
}
export default LikesTab;

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});


1 Answer
1

I think when you are setting the state,you are setting an undefined value of json.results
Instead of that you need to do this

json.results

fetchData = async () => {
const response = await fetch(
'http://api.jsonbin.io/b/5b3a49c8a5a2f34ea6b0fbc8'
);

const json = await response.json();
console.log(json);
this.setState({ data: json.entry });
};


And when rendering use

<Text>{item.resource.medicationCodeableConcept.text}</Text>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.