JavaScript issue: "Error: Uncaught (in promise) SyntaxError: Unexpected end of input"

Encountering the following error message:

Uncaught (in promise) SyntaxError: Unexpected end of input
when attempting to post references to my specific express server. Can anyone here offer assistance?

function create() {

    event.preventDefault()

    firstName = document.getElementById('firstName').value
    lastName = document.getElementById('lastName').value
    username = document.getElementById('username').value
    password = document.getElementById('password').value

    const userInfo = {
        firstName: firstName,
        lastName: lastName,
        username: username, 
        password: password
    }

    const config = {
        method: "POST",
        mode: "no-cors",
        body: {userInfo},
        headers: {
            "Content-Type":"application/json"
        }
    }

    fetch('https://marcelochat.herokuapp.com/create', config)
    .then(res => res.json())
    .then(resp => {
        console.log(resp)
    })
}

The issue is occurring at this point: .then(res => res.json()) NOTE: The values for firstName, lastName, username, and password are derived from input fields.

Answer №1

    let fName = document.getElementById('firstName').value
    let lName = document.getElementById('lastName').value
    let uName = document.getElementById('username').value
    let pWord = document.getElementById('password').value

Are these variables within scope?

If not, consider using the following:

  let firstName = document.getElementById('firstName').value
  let lastName = document.getElementById('lastName').value
  let username = document.getElementById('username').value
  let password = document.getElementById('password').value

Should the config.body userInfo be included in the object?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding it challenging to effectively utilize results returned from functions being called asynchronously through Axios

Currently, I have set up an Express server that functions as a middleware API request forwarding tool. Essentially, the client sends a call to the Express server, which then forwards that call to another API. The intended operation of this server involves ...

Error message: "The 'process' object is undefined in this context. Issue is related to

I am facing an issue while trying to access a Heroku environment variable in my Node/Express application. To set the environment variable in Heroku, I used the following command: heroku config:set GITHUB_TOKEN=<my github api token without quotation ma ...

How to import an HTML file using TypeScript

I need to load an html file located in the same directory as the typescript file and return it from the function. public ...(... ) : angular.IHttpPromise<string> { ... return $http({ method: 'GET', url: &apos ...

Converting JSON data to an Excel file in an Angular application

I'm working on exporting my JSON data to an XLSX file. Despite successfully exporting it, the format in the Excel file isn't quite right. Below is the code I am using: downloadFile() { let Obj = { "data": [12,123], "date": ["2018-10- ...

React Router integration problem with Semantic UI React

Just diving into ReactJS and encountering a problem with using "Menu.Item" (from Semantic UI React) and React Router. I won't include my imports here, but rest assured they are all set up correctly. The constructor in my "App.jsx" looks like this: ...

JavaScript Loading Screen - Issues with window.onload functionality

I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected. The Issue: I discovered that using window. ...

What could be causing the JQuery date picker to fail to load on the initial ng-click event?

I am encountering an issue with a JQuery UI date picker that is loaded through ng-click using the code below: Input: <input type="text" id="datepicker" autocomplete="off" ng-model="selectedDate" ng-click="showDatepicker()" placeholder="(Click to sele ...

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

Tips for incorporating environment variables within a node configuration file

Assuming I have an environment variable $KEY Currently, I am executing KEY=$KEY babel-node build.js //using webpack to create a bundle of my code An issue arises in the JavaScript files bundled by webpack due to an import statement pointing to config.j ...

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

steps to initiate re-render of rating module

My first experience with React has been interesting. I decided to challenge myself by creating a 5-star rating component. All logs are showing up properly, but there seems to be an issue with the component not re-rendering when the state changes. Thank you ...

Get an Array Using AJAX in PHP and JavaScript

Section 1 I want to retrieve an Array from PHP and use it in JavaScript. I have created a file using the fwrite function in PHP, then included that file in my next .load method inside a Div. The new PHP file contains an "include 'somefile.php';" ...

Error in JavaScript goes undetected when utilizing asynchronous AJAX

Having recently started working with ajax and javascript, I find myself puzzled by the fact that my error is not getting caught when making an asynchronous ajax call. I did some research on a similar issue in this query (Catch statement does not catch thr ...

Utilize Firebase Hosting to Host Your Vue Application

Having some trouble with hosting code on Firebase. Instead of displaying the value, {{Item.name}} is appearing :( Same code works fine on Codepen. Wondering if Firebase accepts vue.min.js? When deployed, the site is showing {{var}} instead of the table va ...

An error occurred while trying to load the resource in the Redux-Saga: connection refused

Utilizing axios allows me to make calls to the backend server, while redux-saga helps in managing side effects from the server seamlessly. import {call, put, takeEvery} from "redux-saga/effects"; import {REQUEST_FAILED, REQUEST_SUCCESS, ROOT_URL, SUBMIT_U ...

What is the best way to categorize a collection of objects within a string based on their distinct properties?

I am working with an array of hundreds of objects in JavaScript, each object follows this structure : object1 = { objectClass : Car, parentClass : Vehicle, name : BMW } object2 = { objectClass : Bicycle, parentClass : Vehicle, name : Giant } object3 = { ob ...

Implementing a click event listener on an iframe that has been dynamically generated within another iframe

Below is the code I used to attach a click event to an iframe: $("#myframe").load(function() { $(this.contentWindow.document).on('click', function() { alert("It's working properly"); }); }) Everything seems to be working co ...

Ensure that all items retrieved from the mongoDB query have been fully processed before proceeding further

In the midst of a challenging project that involves processing numerous mongoDB queries to display data, I encountered an issue where not all data was showing immediately upon page load when dealing with large datasets. To temporarily resolve this, I imple ...

Unable to fetch permissions for user:email via GitHub API

Currently, I am utilizing node-fetch to fetch an OAuth2 token from an OAuth2 GitHub App. The obtained token allows me to successfully retrieve user information from "https://api.github.com/user". However, I also require the email address, which necessitate ...

The distinction between a keypress event and a click event

Due to my eyesight challenges, I am focusing on keyboard events for this question. When I set up a click event handler for a button like this: $("#button").on("click", function() { alert("clicked"); }); Since using the mouse is not an option for me, ...