Encountering Uncaught Syntax Error when attempting a request with JSON parameters

Question

Encountering Uncaught Syntax Error when attempting a request with JSON parameters

Currently, I am using Fetch to send a post request to my server while including some additional information. Here's the code snippet:

var rating = document.getElementById("rating");
var ratingValue = rating.innerHTML;
fetch("/films",{
    method: "post",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        rated : ratingValue
    })
})

However, upon trying to retrieve this data on my server, an error is encountered:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

The corresponding server-side code looks like this:

app.post("/films", function(req,res){
    var rating = req.body.rated;
    ...
})

The issue seems to arise from the first line within the function, specifically when declaring the rating variable.

javascript json express post fetch-api

Answer 1

Answer №1

When you define

var rating = document.getElementById("rating");

, you are selecting an HTML element that might look something like this:

<div id='rating'>Some text</div>

. It's important to note that I don't have information on what the content of the rating element is, or its data type, so this is simply an example. In a later part of your code, you are using rating as a key in:

 body: JSON.stringify({
        rating : ratingValue
 })

This means you are attempting to create a key-value pair similar to:

{ "<div id='rating'>Some Text</div>" : ratingValue }

The error indicating a < symbol at position 0 corresponds to the presence of a < at the start of your key. This could be contributing to the error. Are you intending to use the value within the rating element as the key for your body?

*Update 5-25-2020*

If the element with the ID 'rating' contains nested elements, it may cause issues if you only require a simple value.

//This setup can pose problems if the innerHTML of 'rating' is <p>10</p>
<div id='rating'>
     <p>10</p>
</div>

The following example should function correctly if 'ratingValue' expects a number and the innerHTML of 'rating' is 10. You might need to parse the innerHTML using parseInt(), but give it a try without first.

<div id='rating'>
     10
</div>

Please remember that this is just a hypothetical scenario since I don't have details about the type of element attached to the 'rating' ID.

Answer 2

When you define

var rating = document.getElementById("rating");

, you are selecting an HTML element that might look something like this:

<div id='rating'>Some text</div>

. It's important to note that I don't have information on what the content of the rating element is, or its data type, so this is simply an example. In a later part of your code, you are using rating as a key in:

 body: JSON.stringify({
        rating : ratingValue
 })

This means you are attempting to create a key-value pair similar to:

{ "<div id='rating'>Some Text</div>" : ratingValue }

The error indicating a < symbol at position 0 corresponds to the presence of a < at the start of your key. This could be contributing to the error. Are you intending to use the value within the rating element as the key for your body?

*Update 5-25-2020*

If the element with the ID 'rating' contains nested elements, it may cause issues if you only require a simple value.

//This setup can pose problems if the innerHTML of 'rating' is <p>10</p>
<div id='rating'>
     <p>10</p>
</div>

The following example should function correctly if 'ratingValue' expects a number and the innerHTML of 'rating' is 10. You might need to parse the innerHTML using parseInt(), but give it a try without first.

<div id='rating'>
     10
</div>

Please remember that this is just a hypothetical scenario since I don't have details about the type of element attached to the 'rating' ID.

Answer 3

Answer №2

Is it possible that you intended to write req.body.rating instead?

Answer 4

Is it possible that you intended to write req.body.rating instead?

Encountering Uncaught Syntax Error when attempting a request with JSON parameters

Answer №1

Answer №2

Similar questions

Transfer information from an Express route to a function exported from a Node module

Creating a controlled unit test that utilizes rollback functionality in a project involving express, sequelize, mocha, and supertests

Top recommendation for showcasing a numerical figure with precision to two decimal points

Encountering an issue where props are receiving a value of undefined within a component that is

Exporting variables in node.js allows you to share data between different

How to Share Your Vuejs Component with the World by Publishing it on npm

Combining Two Validation Methods for jQuery Validate Plugin

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Tree Grid in jqGrid with Offline Data

What is the best way to ensure that the checkbox is not affected when you click on the area?

Can a robust web application be developed using Kotlin in Node.js?

Utilizing Google Caja for JavaScript sanitization is the only way to ensure

Disable menu bar | customize menu bar in electronJS

Using the function to show content by calling its assigned ID

Perform an Ajax call just one time

The DELETE request in my app using React Native and Fetch API is experiencing difficulties, although it is successfully working when tested in

Save the JSON data into a variable inside a React utility component

Adding images to HTML using JavaScript below existing images

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

What are all the different methods I can use to transfer element A to element B, and what are those methods?