I’ve been dipping my toe into React and am stuck on an issue as I’ve tried to use my own examples from a past project.
For this question I will use the following API url https://webservices.rrts.com/TrackWebApi/api/values/443974522
It returns details about a shipment (or an array if you enter multiple numbers in for a search). In this case, I will only worry about one.
Based on examples and tutorials, I have come to this set of codes as a proper way of handling the return and passing the data off to a new page:
_executeQuery = (query) => {
console.log(query);
this.setState({ isLoading: true });
fetch(query, {
method: 'GET'})
.then(response => response.json())
.then(json => this._handleResponse(json.response))
.catch(error =>
this.setState({
isLoading: false,
message: 'Something bad happened ' + error
}));
};
_handleResponse = (response) => {
console.log(response);
this.setState({ isLoading: false , message: '' });
this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults},);
};
This returns in the console the first (which is the query):
https://webservices.rrts.com/TrackWebApi/api/values/443974522
and this is what response
returns:
undefined
Now, playing around with it, if I change the _executeQuery
to:
_executeQuery = (query) => {
console.log(query);
this.setState({ isLoading: true });
fetch(query, {
method: 'GET'})
.then(response => this._handleResponse(response))
.catch(error =>
this.setState({
isLoading: false,
message: 'Something bad happened ' + error
}));
};
Then query
returns:
https://webservices.rrts.com/TrackWebApi/api/values/443974522
And response
from _handleResponse returns:
Response {
"_bodyInit": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
"_bodyText": "{\"SearchResults\":[{\"SearchItem\":\"443974522\",\"Shipment\":{\"DRAvail\":true,\"ProNumber\":\"443974522\",\"PickupNumber\":\"50904347\",\"CustomerNumber\":\"316966\",\"BOLNumber\":\"158328\",\"BOLReceived\":true,\"PODReceived\":false,\"PONumber\":\"\",\"OrderNumber\":\"25634854\",\"OperationalStatus\":\"PICK\",\"Status\":\"P\",\"InspectionAvailable\":false,\"ProDateTime\":\"2018-10-05T00:00:00\",\"DeliverDateTime\":\"2018-10-12T00:00:00\",\"SpecInst1\":\"CBD 720 570 5457\",\"SpecInst2\":\"\",\"SpecInst3\":\"\",\"Scac\":\"COEP\",\"Location\":\"CHI\",\"Dest\":\"DEN\",\"Manifest\":\"327030-1\",\"BillToAccount\":\"\",\"Pieces\":1,\"Weight\":214,\"ApptDateTime\":\"2018-10-12T00:00:00\",\"DeliveredDateTime\":\"2018-10-12T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-10-11T00:00:00\",\"HAWB\":null,\"Origin\":{\"Name\":\"MAGNUSON GROUP INC\",\"Address1\":\"1400 INTERNATIONALE PKWY\",\"Address2\":\"\",\"City\":\"WOODRIDGE\",\"State\":\"IL\",\"PostalCode\":\"60517\"},\"Consignee\":{\"Name\":\"EON OFFICE PRODUCTS\",\"Address1\":\"60 TEJON ST\",\"Address2\":\"\",\"City\":\"DENVER\",\"State\":\"CO\",\"PostalCode\":\"80223\"},\"PickupTerminal\":{\"TerminalName\":\"Customer Service\",\"TerminalTollFreePhone\":\"(855) 776-3567\"},\"Comments\":[{\"ActivityCode\":null,\"StatusComment\":\"10/05/2018 08:20 AM Pickup Request Received.\",\"StatusDateTime\":\"2018-10-05T08:20:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"PU\",\"StatusComment\":\"10/05/2018 10:09 AM Shipment was picked up\",\"StatusDateTime\":\"2018-10-05T10:09:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"ARQ\",\"StatusComment\":\"10/05/2018 05:14 PM Appointment Pending\",\"StatusDateTime\":\"2018-10-05T17:14:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"CLO\",\"StatusComment\":\"10/05/2018 08:22 PM Trailer Closed - ready for dispatch\",\"StatusDateTime\":\"2018-10-05T20:22:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"DSP\",\"StatusComment\":\"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.\",\"StatusDateTime\":\"2018-10-06T08:45:00\",\"Status\":\"L1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"ARV\",\"StatusComment\":\"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-08T14:00:00\",\"Status\":\"O1\",\"Reason\":\"NS\"},{\"ActivityCode\":\"UNL\",\"StatusComment\":\"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO\",\"StatusDateTime\":\"2018-10-09T09:00:00\",\"Status\":null,\"Reason\":null},{\"ActivityCode\":\"OFD\",\"StatusComment\":\"10/12/2018 06:00 AM Shipment out for delivery\",\"StatusDateTime\":\"2018-10-12T06:00:00\",\"Status\":\"OD\",\"Reason\":\"NS\"},{\"ActivityCode\":\"DEL\",\"StatusComment\":\"10/12/2018 12:00 PM Shipment delivered to consignee\",\"StatusDateTime\":\"2018-10-12T12:00:00\",\"Status\":\"D1\",\"Reason\":\"NS\"}],\"Position\":null,\"ReferenceNumbers\":[],\"SchedArriveEarly\":\"2018-10-05T12:00:00\",\"SchedArriveLate\":\"2018-10-05T15:00:00\",\"ActualDeparture\":\"2018-10-05T10:09:00\",\"OrderDate\":\"2018-10-05T08:20:00\",\"PickedUp\":true},\"DisplayBOL\":false,\"DisplayPOD\":true,\"DisplayInvoice\":false,\"DisplayInspection\":false,\"DisplayWI\":false}]}",
"headers": Headers {
"map": Object {
"cache-control": "no-cache",
"content-encoding": "gzip",
"content-length": "1322",
"content-type": "application/json; charset=utf-8",
"date": "Sat, 03 Nov 2018 17:41:02 GMT",
"expires": "-1",
"pragma": "no-cache",
"server": "Microsoft-IIS/8.0",
"vary": "Accept-Encoding",
"x-aspnet-version": "4.0.30319",
"x-powered-by": "ASP.NET",
},
},
"ok": true,
"status": 200,
"statusText": undefined,
"type": "default",
"url": "https://webservices.rrts.com/TrackWebApi/api/values/443974522",
}
What would be the proper method in this case to return the array of SearchResults
?
At this point I pass the data to my result screen through this method: this.props.navigation.navigate('ShipmentResults', {listings: response.SearchResults}
But what would be the correct response parsing to pass it? At this moment, nothing appears, but I am certain it is because of my handling with the initial parse.
Thanks for your help and any guidance.