[React][Node][MSSql] API Get Request Returns Array of Objects; Fetching Same Array on React Returns JSON.parse Error

Question

Link to my website (open-source, GLP-3)

I'm working on a MERN stack website with React frontend and Microsoft SQL Server as backend. It has a login session with jsonwebtoken, and only I can establish connection with my server, and I'm making a get request for an array of school courses for students to enroll in. Below is my snippet

/*
Get array of school courses
*/
courseGetAll = async () => {
  try {
    // Connect to database
    const pool = await sql.connect(config),
      //Query
      query = "SELECT * FROM Courses",
      result = await pool.request().query(query);
    pool.close();
    // console.log(result);
    // console.log(result.recordsets[0]);
    return result.recordsets[0];
  } catch (error) {
    console.log(error);
  }
};

With the following API implementation

const courseGetAll = async (req, res) => {
    dbo.courseGetAll()
      .then((data) => {
        res.status(200).json(data);
      })
      .catch((e) => {
        console.log(e);
        res.status(400).json({ err: e.message });
      });
  },

When testing the API on Postman, it works fine

[
    {
        "CourseID": 1,
        "CourseName": "Project Management 1",
        "CourseCode": "PRO111",
        "CourseTerm": 1
    },
    {
        "CourseID": 2,
        "CourseName": "C++ Programming Fundamentals",
        "CourseCode": "CPP111",
        "CourseTerm": 1
    },
    {
        "CourseID": 3,
        "CourseName": "Computer Maintenance 1",
        "CourseCode": "COMP111",
        "CourseTerm": 1
    },
    {
        "CourseID": 4,
        "CourseName": "Information Security 1",
        "CourseCode": "IS111",
        "CourseTerm": 1
    },
    {
        "CourseID": 5,
        "CourseName": "Networking Basics",
        "CourseCode": "NET222",
        "CourseTerm": 2
    },
    {
        "CourseID": 6,
        "CourseName": "Web Technology",
        "CourseCode": "WEB222",
        "CourseTerm": 2
    },
    {
        "CourseID": 7,
        "CourseName": "Project Management 2",
        "CourseCode": "PRO222",
        "CourseTerm": 2
    },
    {
        "CourseID": 8,
        "CourseName": "Advanced Project Management 1",
        "CourseCode": "PRO333",
        "CourseTerm": 3
    },
    {
        "CourseID": 9,
        "CourseName": "Advanced C++ Programming Fundamentals",
        "CourseCode": "CPP333",
        "CourseTerm": 3
    },
    {
        "CourseID": 10,
        "CourseName": "Advanced Computer Maintenance 1",
        "CourseCode": "COMP333",
        "CourseTerm": 3
    },
    {
        "CourseID": 11,
        "CourseName": "Advanced Information Security 1",
        "CourseCode": "IS333",
        "CourseTerm": 3
    },
    {
        "CourseID": 12,
        "CourseName": "Advanced Networking",
        "CourseCode": "NET444",
        "CourseTerm": 4
    },
    {
        "CourseID": 13,
        "CourseName": "Advanced Computer Maintenance 2",
        "CourseCode": "COMP444",
        "CourseTerm": 4
    },
    {
        "CourseID": 14,
        "CourseName": "Advanced Information Security 2",
        "CourseCode": "IS444",
        "CourseTerm": 4
    }
]

But trying the same on React, it's a different story

// on client/src/pages/student/pages/AddCourses.js
courses, setCourses] = useState(null),
user = useAuthContext().user;
useEffect(() => {
    const courseList = async () => {
        const response = await fetch("/api/course/all", {
          method: "GET",
          headers: { Authorization: `Bearer ${user.token}` },
        })
        if (response.ok) {
          const coursesNew = await response.json();
          if (coursesNew) {
             setCourses(coursesNew);
             console.log(courses);
          }
        }
      } catch (err) {
        console.log("Error\n" + err.message);
      }
    };
    if (user) {
      courseList();
    }
  }, [user]);

'Cause I keep getting this error no matter what enter image description here

I've made all these requests async & await, changing the way to get a response json by catching in const variables, but same error occurs. I'm stuck, and I don't know where to go from here.

Answer 1

I don't know if this answer will be universal, but I found a solution on my website with the following.

From what I can ascertain, response isn't returning any array of courses because I didn't include a return statement. Here's the code that fixed this for me:

// Get courses
  useEffect(() => {
    const courseList = async () => {
      try {
        const response = await fetch("/api/course/all", {
          method: "GET",
          headers: { Authorization: `Bearer ${user.token}` },
        }).then((response) => {
          return response.json();
        });
        if (response) {
          setCourses(response);
        }
      } catch (err) {
        console.log("Error\n" + err.message);
      }
    };
    if (user) {
      courseList();
    }
  }, [user]);

Now my frontend is successful at grabbing the json array Console Log results

Though this has been resolved, I've got a warning that I can't diagnose and fix myself, but it doesn't break the website fortunately

Source map error: Error: request failed with status 404
Resource URL: null
Source Map URL: react_devtools_backend_compact.js.map

Hoe