CODEWITHSUNDEEP
javascriptjsonreactjs
crimsonpython24
crimsonpython24

Reputation: 2383

React: Invalid JSON

When I fetched from the following URLs and tried to display them (via react-json-view), I ran into the error that property must be a valid JSON object.

Promise.all([
  fetch("http://127.0.0.1:8000/accounts/initstate"),
  fetch("http://127.0.0.1:8000/data/racedata_json/"),
  fetch("http://127.0.0.1:8000/data/racerlog_json/"),
  fetch("http://127.0.0.1:8000/data/racerdata_json/"),
  fetch("http://127.0.0.1:8000/data/teamdata_json/"),
  ])
  .then(([usr, rcdata, rclog, rcrdata, tdata]) => {
    const initialState = {
      user: usr,
      raceapi: {
        racedata: rcdata, racerlog: rclog, racerdata: rcrdata, teamdata: tdata,
      }
    };
    const App = () => {
      return (
        <NTTrackerContextProvider initState={initialState}>
          <NTTracker/>
        </NTTrackerContextProvider>
      )
    };
    ReactDOM.render(<App />, document.getElementById('root'));
  })

Each of the URLs above is a valid JSON object. For example, the first URL looks like (in the body content):

{"user": {"id": 1, "authenticated": true}, "csrftoken": "DSY"}

Here's my context provider:

const initialState = {
  user: {username: "", authenticated: false, email: "",},
  raceapi: {
    racedata: {'data': null}, racerlog: {}, racerdata: {}, teamdata: {},
  }
};

const nttrackerReducer = (state, action) => {
  switch (action.type) {
    case 'LOGGED_IN': {
      let {user, raceapi, ...etc} = state;
      let {userdata} = action;
      return {
        ...etc, user: {...user, ...userdata,}, raceapi: {...raceapi},
      }
    }
    // more cases below
    default: return state;
  }
};

const NTTrackerContextProvider = props => {
  const initState = props.initState || initialState;
  const [state, dispatch] = useReducer(nttrackerReducer, initState);

  return (
    <NTTrackerContext.Provider value={[state, dispatch]}>
      {props.children}
    </NTTrackerContext.Provider>
  );
};

export default NTTrackerContextProvider;

However, the output of state.raceapi (with const [state, dispatch] = useContext(NTTrackerContext)) looks like

enter image description here

Can anyone please help? I want the JSON data from the URLs to go into the state but I couldn't make the data go in.

I tried printing {state.raceapi.racedata} but it becomes a Response object; it seems like I'll be grabbing the data inside the object, but I don't know how to.

Is it necessary to include another fetch in the function where I'll be calling the API, or is there a simpler way?

Thanks in advance.

Upvotes: 0

Views: 1459

Answers (1)

crimsonpython24
crimsonpython24

Reputation: 2383

@Evolutionxbox set me into the right direction, starting with converting each Response object to JSON format:

Promise.all([
  fetch(("http://127.0.0.1:8000/accounts/" + url)),
  fetch("http://127.0.0.1:8000/data/racedata_json/"),
  fetch("http://127.0.0.1:8000/data/racerlog_json/"),
  fetch("http://127.0.0.1:8000/data/racerdata_json/"),
  fetch("http://127.0.0.1:8000/data/teamdata_json/"),
  ])
  .then((([usr, rcdata, rclog, rcrdata, tdata]) => Promise.all(
    [usr.json(), rcdata.json(), rclog.json(), rcrdata.json(), tdata.json()]
  )))
  .then(([usr, rcdata, rclog, rcrdata, tdata]) => {
    const initialState = {
      user: usr,
      site: {locale: enUS,},
      raceapi: {
        // ...

Thanks for anyone that tried to help.

Upvotes: 1

Related Questions