Kevin Powell - Community•4mo ago

JSON.parse unexpected error

I am making a MERN stack app where I have made a DB using Mongo Atlas and using node.js and express to fetch the data in my react app. I am calling the data using an useEffect() and awaiting the data as well. When I am trying to convert the data into json, it is giving me the error of Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data I am stuck here and cant solve this. I tried many different posts on net but none worked for me. The backend server is running on localhost:4000 and react app is on localhost:5173. I tried CORS and even adding a proxy in package.json but that also didnt work. Here is my Github link: https://github.com/Pulkit-s21/_mernStack/tree/main/_workoutApp I would really appreciate any and all help

GitHub

_mernStack/_workoutApp at main · Pulkit-s21/_mernStack

Projects using MERN stack. Contribute to Pulkit-s21/_mernStack development by creating an account on GitHub.

10 Replies

Joao•4mo ago

How does the JSON response look like?

Killer🔪•4mo ago

workoutSchema for mongodb

import mongoose from "mongoose"

const Schema = mongoose.Schema

const workoutSchema = new Schema(
  {
    title: {
      type: String,
      required: true,
    },
    reps: {
      type: Number,
      required: true,
    },
    load: {
      type: Number,
      required: true,
    },
    bodyPart: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
)

const Workout = mongoose.model("Workout", workoutSchema)

export { Workout }

import mongoose from "mongoose"

const Schema = mongoose.Schema

const workoutSchema = new Schema(
  {
    title: {
      type: String,
      required: true,
    },
    reps: {
      type: Number,
      required: true,
    },
    load: {
      type: Number,
      required: true,
    },
    bodyPart: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
)

const Workout = mongoose.model("Workout", workoutSchema)

export { Workout }

workoutController

import { Workout } from "../models/workoutSchema.js"
import mongoose from "mongoose"

// * Get all workouts
export const getWorkouts = async (req, res) => {
  const workouts = await Workout.find({}).sort({ createdAt: -1 })
  res.status(200).json(workouts)
}

import { Workout } from "../models/workoutSchema.js"
import mongoose from "mongoose"

// * Get all workouts
export const getWorkouts = async (req, res) => {
  const workouts = await Workout.find({}).sort({ createdAt: -1 })
  res.status(200).json(workouts)
}

useEffect on the Home Page

  useEffect(() => {
    const fetchWorkouts = async () => {
      const res = await fetch("/api/workouts")
      const json = await res.json()

      if (res.ok) {
        setWorkouts(json)
      }
    }
    fetchWorkouts()
  }, [workouts])

  useEffect(() => {
    const fetchWorkouts = async () => {
      const res = await fetch("/api/workouts")
      const json = await res.json()

      if (res.ok) {
        setWorkouts(json)
      }
    }
    fetchWorkouts()
  }, [workouts])

Joao•4mo ago

Are you using postman, insomnia or something like that?

Jochem•4mo ago

99 times out of a hundred, that error means you're getting a 500 or 404/401 or some other error and the server is sending you HTML instead of JSON. Log the response body and see what's going on there

Killer🔪•4mo ago

Response { type: "basic", url: "http://localhost:5173/api/workouts", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(6), body: ReadableStream, bodyUsed: false }

body: ReadableStream { locked: true }

locked: true

<prototype>: ReadableStreamPrototype { cancel: cancel(), getReader: getReader(), pipeThrough: pipeThrough(), … }

bodyUsed: true

headers: Headers(6) { "access-control-allow-origin" → "*", "cache-control" → "no-cache", "content-length" → "674", … }

ok: true

redirected: false

status: 200

statusText: "OK"

type: "basic"

url: "http://localhost:5173/api/workouts"

Response { type: "basic", url: "http://localhost:5173/api/workouts", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(6), body: ReadableStream, bodyUsed: false }

body: ReadableStream { locked: true }

locked: true

<prototype>: ReadableStreamPrototype { cancel: cancel(), getReader: getReader(), pipeThrough: pipeThrough(), … }

bodyUsed: true

headers: Headers(6) { "access-control-allow-origin" → "*", "cache-control" → "no-cache", "content-length" → "674", … }

ok: true

redirected: false

status: 200

statusText: "OK"

type: "basic"

url: "http://localhost:5173/api/workouts"

Jochem•4mo ago

that's the response, not the response body

Killer🔪•4mo ago

If I do console.log(res.body) it just shows that ReadableStream { locked: false }

Jochem•4mo ago

try console.log(await res.body)?

Killer🔪•4mo ago

Same thing I dont know what changed but now I am getting the CORS error and not the earlier one

Joao•4mo ago

There's an express package called cors that you can use for that. https://expressjs.com/en/resources/middleware/cors.html

Gaming

Programming

JSON.parse unexpected error