How to use fetch with wordpress rest API - wordpress

Question

I have this code and I wanna login using the link in the fetch of this below code but I'm getting this error while clicking on the login button: JSON Parse Error: Unexpected EOF. I'm trying to use rest API for this login app.
var React = require('react');
var ReactNative = require('react-native');
var t = require('tcomb-form-native');
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
Image,
} = ReactNative;
var STORAGE_KEY = 'id_token';
var Form = t.form.Form;
var Person = t.struct({
username: t.String,
password: t.String
});
const options = {};
var AwesomeProject = React.createClass({
async _onValueChange(item, selectedValue) {
try {
await AsyncStorage.setItem(item, selectedValue);
} catch (error) {
console.log('AsyncStorage error: ' + error.message);
}
},
componentDidMount: function() {
this._userLogin();
},
_userLogin: function() {
var value = this.refs.form.getValue();
if (value) { // if validation fails, value will be null
fetch("http://vowelserver.com/trades/test_autheticate/", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: value.username,
password: value.password,
})
}).then((response) => response.json())
.then((responseData) => {
this._onValueChange(STORAGE_KEY, responseData.id_token)
}).done();
}
},
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<Image
resizeMode="contain"
source={{uri: 'http://res.cloudinary.com/vowelweb/image/upload/v1498114115/Logo_mqzlgt.png'}}
style={styles.image}
/>
</View>
<View style={styles.row}>
<Form
ref="form"
type={Person}
options={options}
/>
</View>
<View style={styles.row}>
<TouchableHighlight style={styles.button} onPress={this._userLogin} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
containers: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: 'white',
position: 'relative',
borderBottomWidth: 1,
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
login: {
flex: 1,
backgroundColor: '#efeff2',
alignItems: 'center',
justifyContent: 'center',
},
image: {
position: 'absolute',
top: 0,
bottom: 0,
left: 30,`enter code here`
right: 30,
},
});
AppRegistry.registerComponent('FirstRun', () => AwesomeProject);

Answer 1

This line...
(response) => response.json()
assumes that you are getting a string that is parseable into JSON.
Try inspecting the response.

Answer 2

Pleas find the code snippet for the simple fetch api call in react.make sure you have valid url which will return you the response
getMoviesFromApiAsync = () => {
return fetch('http://droidtute.com/reactexample/sample_api/getMovieList.php')
.then((response) => response.json())
.then((responseJson) => {
// alert(JSON.stringify(responseJson))
this.setState({ moviesList: responseJson.movieList }) // this will update state to re-render ui
return responseJson.movieList;
})
.catch((error) => {
console.error(error);
});
}