Error in API response saying required parameters React native - react-native

When I call API I am getting below error in response. please find below is code and error message.
TEST RESPONSE:
{
"responseData": {"limit": ["Limit is required"],
"module_type": ["Module type required"],
"section": ["section value \"liveability || investment || recommend\" is required"],
"skip": ["Skip is required"]
}
Implemented code:
fetch( 'https://api.dotcomkart.com/api/homePagePropertyList?', {
method: 'POST',
body: JSON.stringify({
skip: 0,
limit: 10,
module_type:'buy',
section: 'liveability'
}),
})

Try this way
import FormData from 'FormData';
...
var data = new FormData();
data.append("skip", "0");
data.append("module_type", "buy");
....
fetch('YOUR_URL', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
body: data,
})
.then((response) => response.json())
.then((responseJson) => {
console.log('response object:',responseJson)
})
.catch((error) => {
console.error(error);
});

Sometimes when you work with REST API call you have to work with correct headers.
In your case I suppose your are missing two important headers required to activate a good communication between client and servers:
accept
content-type
Please review your code based on this one:
fetch('https://api.dotcomkart.com/api/homePagePropertyList?', {
method: 'POST',
headers: {
"accept": "application/json",
"content-type": "application/json"
},
body: JSON.stringify({
skip: 0,
limit: 10,
module_type:'buy',
section: 'liveability'
}),
})
I think the server is returning "missing" parameters because is not able to understand the type of content. With Content-Type you should be able to instruct the server on how to parse your data.

Related

How to get response with axios api with "GET" method in react native

Here is my code:
axios({
method: "GET",
url: "http://112.196.108.244:9002/api/survey/question/get-question/not-answered/?surveyId=",
headers: {
"content-type": "application/json",
Authorization: `Bearer token-key`,
},
body: {
id: "68367859",
isMandatory: "false",
paginationFilter: { limit: 10, offset: 0, order: "DESC" },
filterInput: {
locationIds: ["1", "4011403", "4012144"],
categoryIds: [
"twoSubCategories/7898496",
"domains/7895290",
"subCategories/7896491",
],
},
},
})
.then((response) => {
console.log("response", response);
})
.catch((error) => {
console.log("error", error.response.data);
});
this code gives me error:
The error in console is-
details: "uri=/api/survey/question/get-question/not-answered/"
message: "document key is not valid."
status: 400
You're passing the id in the body. There are two problems at play here:
GET requests shouldn't use a body as part of the request. Check this answer.
What you want to do is pass the id (Which I assume is the survey id) as a query parameter. Something like this should work:
axios({
method: 'GET',
url: 'http://112.196.108.244:9002/api/survey/question/get-question/not-answered/',
headers: {
'content-type': 'application/json',
Authorization: "Bearer token-key"
},
params: {
surveyId: "68367859"
}
})
Add other params as necessary.

my react-native app fail to send body in POST request to backend url

As i am trying to send my data in form of body in backed url as in backed i have made something if it dont receive body it will send sucess: false, msg: haven't received body else sucess: true, msg: jwt token as if i make request from post man with same data it's working but sending via. native app it fails to send.. any help will be helpfull
As 1st request is from postman and 2nd from my app
const handleLogin = (Enrno, Pass) => {
setError(null);
setIsLoaded(false);
setItems([]);
fetch(config.url + "/login", {
method: "POST",
header : {
Accept : 'application/json',
'Content-Type' : 'application/json'
},
body : JSON.stringify({
"enrno": Enrno,
"password" : Pass
})
})
.then((res) => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
alert(items[0].msg);
},
(error) => {
setIsLoaded(true);
setError(error);
}
);
};
I think you need to put these to headers, not header.
Accept : 'application/json',
'Content-Type' : 'application/json'
So, it should look like this.
fetch(config.url + "/login", {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
enrno: Enrno,
password : Pass
})
})

Vuejs: axios; Passing custom header in POST method

We are making an axios POST call from VueJs, need to pass a custom header. The way it is coded now, the custom header is not getting passed to the server script, other headers are getting passed. Please let me know what I might be doing wrong. Appreciate your help.
axios({
method: 'post',
url: urltocall,
data: strjson,
config: {
headers: {
'Access-Control-Allow-Origin': 'http://localhost:1337',
'Accept': 'application/json',
'Content-Type': 'application/json',
'username': 'test1'
}
}
})
.then(function (response) {
}
The headers object should not be put into a "config" object.
It's just...
axios({
method: 'post',
url: urltocall,
{
headers: {
....
Try doing it like this:
axios
.post(urltocall, myDataAsJSON, {
headers: {
"Access-Control-Allow-Origin": "http://localhost:1337",
"Accept": "application/json",
"Content-Type": "application/json",
"username": "test1"
}
})
.then(response => {
console.log("Success: " + response.data);
})
.catch(error => {
console.log("Error: " + error.response.data);
});
By the way, based on your 'Content-Type': 'application/json',, I know you're trying to send a JSON object, but where/what is this object?
Also, refer to the Full documentation for more information.

React Native can't get response from localhost

i'm studying with React Native,
but i can't get response properly
my fetch code is :
try {
let response = fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
console.log(response);
the response is :
the api response which i get from api when i try postman:
my php api is :
but my debugger console response is
fetch() function return a promise, so you should resolve this promise using one of this 2 methods:
1/ Using .then()
fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
).then(response => {
console.log(response); //<- your response here
}).catch(error => {
console.log(error); //<-catch error
});
2/ Using async/await syntax: you should add async keyword on the function where you call fetch
async getResponse(){
try {
let response = fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
console.log(response); //<- your response here
} catch(e){
console.log(e);<-catch error
}
}
You can send it using formdata:
let formData = new FormData();
formData.append('firstname', 'test');
If you do this, you don't have to use JSON.stringify:
fetch(
"http://192.168.1.106/little_api/index.php",
{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: data
}
...
fetch is an asynchronous method, meaning it needs a .then callback. The data that immediatley comes from this then has a json() method attached to it to retrieve the actual data in a readable format.
fetch("http://192.168.1.106/little_api/index.php", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(response => response.json())
.then(data => {
console.log(data) // this should return your data
})
.catch(err => console.log(err))
As Mahdi N said in his response, you can use the async/await syntax to retrieve the data without needing the nested callbacks.

How to get access token from api in react native

I am using react native and i want to get the access token from api which is created in django using oAuth 2 authentication
i am passing all the details which are required but i do not know why i am getting error of unsupported grant type
fetch('MyApiUrl', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({
'grant_type': 'password',
'username': 'MyUserNameSettedInApi',
'password': 'PasswordSettedInApi',
'client_id': 'MyClientId',
'client_secret': 'MyClientSecret',
'scope': 'read Write'
})
})
.then((response) => response) <----tried response.json() but giving same error of grant type
.then((responseData) => {
console.log(responseData);
})
My expected result is i want access token should display
and what i am getting is
Response {type: "default", status: 400, ok: false, statusText: undefined, headers: Headers, …}
headers: Headers {map: {…}}
ok: false
status: 400
statusText: undefined
type: "default"
url: "http://MyUrl"
_bodyInit: "{"error": "unsupported_grant_type"}"
_bodyText: "{"error": "unsupported_grant_type"}"
__proto__: Object
please help
thanks in advance
tried response.json() but giving same error of grant type - this is answer from Your oauth server.
response.json() transform your response data into json decoded string.
Change Your code to this:
let formData = new FormData();
formData.append('grant_type', 'password');
formData.append('username', 'MyUserNameSettedInApi');
formData.append('password', 'PasswordSettedInApi');
formData.append('client_id', 'MyClientId');
formData.append('client_secret', 'MyClientSecret');
formData.append('scope', 'read Write');
fetch('MyApiUrl', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formData
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
});
Install qs library
npm install qs
Import it in your app and then you'll be able to send it.
Use qs.stringify as shown below
fetch('http://localhost:8888/o/token',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded;'
},
body: qs.stringify({
'grant_type': 'password',
'username': 'MyUserNameSettedInApi',
'password': 'PasswordSettedInApi',
'client_id': 'MyClientId',
'client_secret': 'MyClientSecret',
})
})
I also got that same issue of "{"error": "unsupported_grant_type"}" for that, I just pass all the body parameters directly without using JSON.stringify({}); It works for me, find the example code below.
body: 'grant_type=password&username=MyUserName&password=MyPassword'
you need to update the body section only.
fetch('MyApiUrl', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'grant_type=password&username=MyUserName&password=MyPassword'
})
.then(res => res.json())
.then(token => console.log(token))
.catch(err => console.error(err));
Hope this will help you.