Axios Post Response React Native & Mockable - json

Question

I'm trying to post to my Mockable API using Axios and React Native,
I'm quite inexperienced with Axios and Mockable and am not sure If I'm getting the response that I'm suppose to.
To explain:
In my app I've got a set of data (order data) which I'm trying to post to my mockable api.
So what I expect is
to add an order with the data from below to my API everytime I hit post.
What is happening
Everytime I hit post an order does not get added to my API.
How do I add objects to my Mockable API using Axios and React Native?
class BarPaymentScreen extends Component{
static navigationOptions = {
// header: null,
};
constructor(props){
super(props);
this.state ={
isLoading: false,
orderRestaurantId : 'empty',
orderValue: 'empty',
orderProducts: 'empty',
orderTotalPrice: 'empty',
}
}
handleSubmit = () => {
this.setState({
orderRestaurantId : this.props.restaurantId,
orderValue: this.state.value,
orderProducts: this.props.products,
orderTotalPrice: this.props.totalPrice,
})
axios({
method: 'post',
url: 'https://demo3381137.mockable.io/orders',
data: {
orders: {
orderId: '1',
restaurantId: this.state.orderRestaurantId,
orderKey: "AppOrderKey",
userId: "1",
paymentStatus: "approved",
preparing: "approved",
orderStatus: "approved",
paymentMethod: this.state.orderValue,
totalPrice: this.state.orderTotalPrice,
order: [
{
product : "bier",
qty : "5"
}
]
}
}
}).then(function (response) {
console.log('response',response);
})
.catch(function (error) {
console.log("error response",error);
});
console.log('submit');
}
Response Data
response Object {
"config": Object {
"adapter": [Function xhrAdapter],
"data": "{\"orders\":{\"orderId\":\"1\",\"restaurantId\":\"empty\",\"orderKey\":\"AppOrderKey\",\"userId\":\"1\",\"paymentStatus\":\"approved\",\"preparing\":\"approved\",\"orderStatus\":\"approved\",\"paymentMethod\":\"empty\",\"totalPrice\":\"empty\",\"order\":[{\"product\":\"bier\",\"qty\":\"5\"}]}}",
"headers": Object {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8",
},
"maxContentLength": -1,
"method": "post",
"timeout": 0,
"transformRequest": Object {
"0": [Function transformRequest],
},
"transformResponse": Object {
"0": [Function transformResponse],
},
"url": "https://demo3381137.mockable.io/orders",
"validateStatus": [Function validateStatus],
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
},
"data": Object {
"orders": Array [
Object {
"restaurantId": "1",
"order": Array [
Object {
"product": "bier",
"qty": "5",
},
Object {
"product": "wisky",
"qty": "5",
},
Object {
"product": "fanta",
"qty": "5",
},
],
"orderId": "1",
"orderKey": "F3SAR566T",
"orderStatus": "approved",
"paymentMethod": "approved",
"paymentStatus": "approved",
"preparing": "approved",
"totalPrice": 10,
"userId": "1",
},
],
},
"headers": Object {
"access-control-allow-origin": "*",
"cache-control": "public, max-age=0",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"request": XMLHttpRequest {
"DONE": 4,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"OPENED": 1,
"UNSENT": 0,
"_aborted": false,
"_cachedResponse": undefined,
"_hasError": false,
"_headers": Object {
"accept": "application/json, text/plain, */*",
"content-type": "application/json;charset=utf-8",
},
"_incrementalEvents": false,
"_lowerCaseResponseHeaders": Object {
"access-control-allow-origin": "*",
"cache-control": "public, max-age=0",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"_method": "POST",
"_requestId": null,
"_response": "{
\"orders\": [
{
\"orderId\": \"1\",
\"restaurantId\": \"1\",
\"orderKey\": \"F3SAR566T\",
\"userId\": \"1\",
\"paymentStatus\": \"approved\",
\"preparing\": \"approved\",
\"orderStatus\": \"approved\",
\"paymentMethod\": \"approved\",
\"totalPrice\": 10,
\"order\": [
{
\"product\" : \"bier\",
\"qty\" : \"5\"
},
{
\"product\" : \"wisky\",
\"qty\" : \"5\"
},
{
\"product\" : \"fanta\",
\"qty\" : \"5\"
}
]
}
]
}",
"_responseType": "",
"_sent": true,
"_subscriptions": Array [],
"_timedOut": false,
"_trackingName": "unknown",
"_url": "https://demo3381137.mockable.io/orders",
"readyState": 4,
"responseHeaders": Object {
"Cache-Control": "public, max-age=0",
"access-control-allow-origin": "*",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"responseURL": "https://demo3381137.mockable.io/orders",
"status": 200,
"timeout": 0,
"upload": XMLHttpRequestEventTarget {
Symbol(listeners): Object {},
},
"withCredentials": true,
Symbol(listeners): Object {
"error": Object {
"kind": 3,
"listener": [Function handleError],
"next": null,
},
"readystatechange": Object {
"kind": 3,
"listener": [Function handleLoad],
"next": null,
},
"timeout": Object {
"kind": 3,
"listener": [Function handleTimeout],
"next": null,
},
},
},
"status": 200,
"statusText": undefined,
}

Answer 1

Code worked, Mockable.io has a page which shows the response to my posts.