Category: JavaScript Answers

Categories
JavaScript Answers

How to Fix the “unexpected token o” Error When Trying to Parse JSON in Our JavaScript App?

selective focus photography of white dog

Sometimes, we may run into the “unexpected token o” error when parsing JSON in our JavaScript app.

In this article, we’ll look at how to fix the “unexpected token o” error when trying to parse JSON in Our JavaScript app.

Fix the “unexpected token o” Error When Trying to Parse JSON in Our JavaScript App

To fix the “unexpected token o” error when trying to parse JSON in Our JavaScript app, we should make sure that we’re running JSON.parse on a valid JSON string.

For instance, instead of writing something like:

const obj = {  
  foo: 'bar'  
}  
console.log(JSON.parse(obj))

where we’re trying to call JSON.parse on the obj object, we should make sure that we’re calling JSON.parse on a valid JSON string.

For example, we write:

const obj = JSON.stringify({  
  foo: 'bar'  
})  
console.log(JSON.parse(obj))

to convert the object into a JSON string with JSON.stringify .

Then we can call JSON.parse successfully to parse the JSON string back into an object.

The console log should log:

{foo: "bar"}

Conclusion

To fix the “unexpected token o” error when trying to parse JSON in Our JavaScript app, we should make sure that we’re running JSON.parse on a valid JSON string.

Categories
JavaScript Answers

How to Fix the ‘Error: listen EADDRINUSE’ Error When Running a Node.js App?

white and brown long coated small dog

Sometimes, we may run into the ‘Error: listen EADDRINUSE’ error when running a Node.js app.

In this article, we’ll look at how to fix the ‘Error: listen EADDRINUSE’ error when running a Node.js app.

Fix the ‘Error: listen EADDRINUSE’ Error When Running a Node.js App

To fix the ‘Error: listen EADDRINUSE’ error when running a Node.js app, we should make sure that no process is running on the same port that the Node.js app is running on.

For instance, if we have the following Express app code:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Then we should make sure that no process is running on port 3000 before we run our Express app.

Conclusion

To fix the ‘Error: listen EADDRINUSE’ error when running a Node.js app, we should make sure that no process is running on the same port that the Node.js app is running on.

Categories
Express JavaScript Answers

How to Fix the “Can’t set headers after they are sent to the client” Error in an Express App?

yellow Labrador puppy on floor

Sometimes, we may run into the “Can’t set headers after they are sent to the client” when we run our Express app.

In this article, we’ll look at how to fix the “Can’t set headers after they are sent to the client” in our Express app.

Fix the “Can’t set headers after they are sent to the client” Error in an Express App

To fix the “Can’t set headers after they are sent to the client” in our Express app, we should make sure that we only send a response once in our Express middleware chain.

For instance, we shouldn’t have code like:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('hello world')
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

which calls res.send twice.

We should make sure that we only send a response once in our middleware chain.

This also means we shouldn’t have code like:

const express = require('express')
const app = express()
const port = 3000

app.use((req, res, next) => {
  res.send('hello world')
  next()
})

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

where we call res.send in our middleware that’s run before the / route handler.

And res.send is also called in the / route handler itself.

This will also cause the error.

Instead, we should write:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

or:

const express = require('express')
const app = express()
const port = 3000
app.use((req, res, next) => {
  console.log('hello world')
  next()
})

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

where we only return a response once in the whole middleware chain.

Conclusion

To fix the “Can’t set headers after they are sent to the client” in our Express app, we should make sure that we only send a response once in our Express middleware chain.

Categories
Express JavaScript Answers

How to Fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error in a JavaScript App?

yellow labrador puppies in green plastic container

Sometimes, we may run into the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

In this article, we’ll look at how to fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

Fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error in a JavaScript App

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

To use it, we write:

const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000

app.use(cors())

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to add the cors middleware into our Express app with:

app.use(cors())

We installed the cors package to make it available.

To install it, we run:

npm i cors

Now we should be able to make requests from our JavaScript app to our server-side web app without the No ‘Access-Control-Allow-Origin’ header is present on the requested resource thrown in our JavaScript browser app.

Conclusion

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

Categories
JavaScript Answers

How to Push JSON Objects into a JSON Array Stored in Local Storage?

black short coated dog on persons hand

Sometimes, we want to push JSON objects into a JSON array in local storage.

In this article, we’ll look at how to push JSON objects into a JSON array in local storage.

Push JSON Objects into a JSON Array in Local Storage

To push JSON objects into an array in local storage, we can push the object into an array, then we can stringify that array and put it into local storage.

For instance, we can write:

const a = [];
const obj = {
  foo: 'bar'
}
a.push(obj);
localStorage.setItem('session', JSON.stringify(a));

to create the a array.

Then we create the obj object that we put into the a array by calling push on a with obj as the argument.

Finally, we store the a array by putting it in an entry with key set to 'session' and a as the corresponding value with:

localStorage.setItem('session', JSON.stringify(a));

We’ve to convert the a array into a JSON string with JSON.stringify before we can store it in local storage with localStorage.setItem .

Conclusion

To push JSON objects into an array in local storage, we can push the object into an array, then we can stringify that array and put it into local storage.