Request Fetch Parse Issue

#1

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.

#2

Is there any reason why you aren’t using this syntax:

const response = await fetch(‘url’);
const data = await response.json();

I find this easier to read and thus I believe that writing something wrong in your code is unlikely to happen. (Don’t forget to make your function async)

closed #3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.