Get request with fetch and react

Question

This is probably a very dumb question, but I cant find any solution on the web, please dont bash me. I set up a create-react-app and want to display some data in a table.

This is my JSON:

[ {
  "unitid" : 29,
  "createddate" : 1510324778000,
  "latitude" : 49.402008056640625,
  "longitude" : 11.901968002319336,
  "senderid" : 6,
  "signalstrength" : 37
}, {
  "unitid" : 34,
  "createddate" : 1510563384000,
  "latitude" : 49.22679901123047,
  "longitude" : 12.845210075378418,
  "senderid" : 8,
  "signalstrength" : 0
},......

And my table needs a JSON Array with all the attributes in order to display every column correctly.

This is the code where I try to fetch the data from an endpoint of mine:

class App extends Component {
constructor(props){
    super(props);

    this.state = {
        vehicleList: [],
    };
}

componentDidMount(){
    fetch('endpoint-link', {mode: 'no-cors', method: 'get'})
        .then(response => response.json())
        .then(result => {
            this.setState({vehicleList: result.vehicleList})
            console.log(result)
        })

        .catch(error => {
            this.setState({isLoaded: true, error})
            console.log(error)
        });
}

render() {
    const {vehicleList} = this.state;
    console.log(vehicleList);.......

When I open the Devtools in Chrome, go for "Network" I can see that the endpoint is known and the data is found, but somehow the fetch method is not loading the JSON into the Array.

Under "this is my JSON", you just have an array. It has no `vehicleList` property. And yet, you are putting `result.vehicleList` into your state. Does the JSON have a `vehicleList` property, or does it not? — JLRishe, Nov 21 '17 at 21:01

score 0 · Answer 1 · answered Nov 21 '17 at 21:04

0

Your JSON doesn't have a vehicleList property. It just has the array of vehicles. So you need to put that in your state:

this.setState({vehicleList: result})

answered Nov 21 '17 at 21:04

JLRishe

99,490
19
131
169

It is still not working. When I open the Console in Chrome-Dev, I see empty arrays for the console logs I put in my code and also it seems like its jumping to the .catch error directly because its giving me this warning "Unexpected end of input". – Aleks Nov 21 '17 at 21:08
@Aleks That would suggest that the JSON might not be valid. Are you sure that the JSON is valid? Can you copy it into a validator? – JLRishe Nov 21 '17 at 21:10
Just tested it and the two validators were giving me positive results. What else could be the problem? – Aleks Nov 21 '17 at 21:17
@Aleks if you click the request in the Network tab and look at the Response tab, is the full JSON there? – JLRishe Nov 21 '17 at 21:22
@Aleks Not quite sure what else to suggest. Could you add the full error message and stack trace to the body of your question? – JLRishe Nov 21 '17 at 21:28
I found the problem. Its because of the mode:"no-cors". It is not possible to do it this way. See this: https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input – Aleks Nov 21 '17 at 21:43
@Aleks Ok, so you were specifying `no-cors` on a cross-domain request? Was the use of `result.vehicleList` instead of `result` (as I mentioned in my answer) also something that needed to be fixed, or was I mistaken about that? – JLRishe Nov 22 '17 at 03:57
It was not a difference. The same JSON was shown with both solutions. – Aleks Nov 22 '17 at 07:44
@Aleks Huh? `this.setState({vehicleList: result.vehicleList})` and `this.setState({vehicleList: result})` can't both produce the same outcome. Which one worked in the end (successfully resulted in the vehicles being shown on the page)? – JLRishe Nov 22 '17 at 08:04

score 0 · Answer 2 · answered Nov 21 '17 at 21:44

0

The problem is this -> ...{mode="no-cors"...} See this post in order to fix it: Handle response - SyntaxError: Unexpected end of input

answered Nov 21 '17 at 21:44

Aleks

101
1
12

Get request with fetch and react

2 Answers2