I am trying to extract JSON data which I am doing using the POST request in react native can somebody let me know how to do that
and I want to pass the extracted data to another screen as well
If you are posting any data by POST method then you must have to use GET method to extract the data. You can use axios for it like
`axios.get('endpoint').then(res => res.json)`
After getting your data you can store it in some state and then you have to pass the data to other screens like below:
onPress={() => {
this.props.navigation.navigate('YourScreenName', {
data: item.data,
});
}}
Related
I am still new to Vue and have trouble with uing data from api within the script setup() of Vue3 composition api.
const data = computed(() => store.getters['projectSettings/getData']);
I get the data via store.getters return it and render it in the template. That works fine.
<cc-headline tag="h1">{{ data.name }}</cc-headline>
But if I want to use the same piece of data within setup() it is undefined
const data = computed(() => store.getters['projectSettings/getData']);
console.log(data.name)
What am I doing wrong?
If you want to print a computed property in the setup function you have to access it with console.log(data.value.name).
In the template it's working, because it automatically resolves to data.value if you render it via {{ data }}
Check the documentation to learn more: https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties
The solution was:
onUpdated(() => {
console.log(data.value.name)
})
It is no longer undefined and returns the value from the api
I have requirement where I have to create the TextInputs, Buttons, and other UI components, but the issue is I have to create the UI directly from the JSON data provided like
{
key: "TextInput",
props: {
// some props of the component
}
}
I tried to find many libraries which can do such thing in React Native but not getting the results I want.
You import the JSON data and check if a value exists or map/loop through an array of values
So for instance
import data from 'data.json'
{data.key && (
<TextInput value={data.key}></TextInput>
)}
In a react native project using MobX, it would be more efficient to save the data for use on the next page. Or is it sending as params with the route? Suppose we are sending 50 pieces of data in Data.
//the page I will use the data
//option1
const {data} = route.params;
//option2
const {data} = Store;
Which one is better to use in terms of performance? Does the data I send with the route affect the rendering time of the opened page?
I am working on an application using React with Redux Observable.
I have a react Component which builds a seachCriteria object taking inputs from users (Dropdown, date picker).
On Click of a button I call a service which is part of an Epic.
I want to pass this search Criteria Object as a body parameter in my fetch request.
What's the best way to do that. Since epic takes an action and a store, shall I add that search criteria object as a part of store (my state object) ?
On Click of a button I call a service which is part of an Epic. I want to pass this search Criteria Object as a body parameter in my fetch request.
Since redux-observable plugs into redux, you should be dispatching an action rather than calling a service directly.
By doing that you could add your search criteria to the action payload and your epic would look like:
const searchEpic = action$ => action$.pipe(
ofType('search'),
pluck('payload'),
map(toQueryString),
mergeMap(query => fetch(`api.something.com/search?${query}`)),
mergeMap(result => result.json()),
map(data => ({ type: 'search resolved', payload: data })),
);
I'm trying to pass the data I have received from scanning a barcode. I'm able to print the data using JSON.stringify(data) and the data is being passed but I just can't seem to display it.
Passing the data successfully with:
_handleBarCodeRead = data => {
Alert.alert(
'Scan successful!',
JSON.stringify(data)
);
const { navigate } = this.props.navigation;
navigate('KnownProduct', {data})
};
Attempting to render the data on this page:
render(){
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
<Text>{this.props.navigation.state.params.data.toString}</Text>
</View>
);
I know the navigation works correctly because if I hard-code the value the screen does navigate after scanning a barcode and display the hard-coded value. However, I think I'm trying to call the data incorrectly with: this.props.navigation.state.params.data.toString but having no luck figuring out how to display the passed data.
Any react native experts able to help a newbie?
OK.... So I figured it out... thanks to one commenter who pointed out I should pass the data like so:
navigate('KnownProduct', {data: data})
And then what was missing in the redirection page was:
<Text>{this.props.navigation.state.params.data.data}</Text>
data.data got me!
Try this :
navigate('KnownProduct', {data:JSON.stringify(data)})
AND
<Text>{this.props.navigation.state.params.data}</Text>
try this
navigate('KnownProduct', {data:data.data})
<Text>{this.props.navigation.getParam('data')}</Text>