Getting error when printing json array in EJS variable on console

Question

Guys I am using expressjs, ejs to develop an online shopping website.

Scenario In order to display products {name, description, imageUrl} I am iterating with the help of ejs control-flow on the webpage.

I am sending an array that contains all the details about each product in JSON format. (from server) on the client-side when I try to access this array of jsons I get the following error.

(index):266 Uncaught SyntaxError: Invalid or unexpected token

When I opened the sources tab in google chrome it, showed me this

At line number 266. I believe that it is taking this as a string by wrapping the array in double quotes.?

Could anyone tell me what's going wrong with this code?

And by the way, is how I trying to print the array on chrome console

  <script>
    const data = JSON.parse("<%- products %>");
    console.log(data);
  </script>

where products are an array of jsons

Backend home route which is sending the JSON array is as follows

router.get("/", async (req, res) => {
  let catalogInformation = {};
  //getAllProducts returns array of json from the database
  const products = await getAllProducts();
  catalogInformation.products = products;
  userData = {
    email: null,
    username: null,
  };
  catalogInformation.userData = userData;
  if (req.session.userInformation != null || req.session.userInformation != undefined) {
    catalogInformation.userData = req.session.userInformation;
  } else {
    catalogInformation.userData = {
      email: null,
      username: null,
    };
  }
  // res.render("catalog", userData);
  res.render("catalog", catalogInformation);
  return;
});

getAllProducts() method

const getAllProducts = async () => {
  const Product = mongoose.model("product", productSchema);
  const allProducts = await Product.find();
  return allProducts;
};

It looks like the array is generated in the getAllProducts() function. Are you able to provide the code for that function? — MattB
– MattB, Commented Oct 27, 2020 at 14:36

MattB · Accepted Answer · 2020-10-27 15:20:32Z

1

You don't need to use JSON.parse. Just output the JSON directly:

var data = <%- products %>;

I wouldn't suggest making an AJAX call because you'd be handling 2 requests instead of 1.

edited Oct 27, 2020 at 15:20

answered Oct 27, 2020 at 14:07

MattB

1,1048 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Umakanth Pendyala Over a year ago

But why is the output not wrapped in [ ]? though I am sending an array.

MattB Over a year ago

I don't know, I'd have to see the backend code to be able to help.

Umakanth Pendyala Over a year ago

Hey, I just added the backed route. If this is not enough. I will share my git repo link here.

Umakanth Pendyala Over a year ago

Yeah, I added the products method. Please take a look.

MattB Over a year ago

Nothing about the code looks like it wouldn't/shouldn't output the brackets. Did the backquote work? Are the brackets still not outputting with the updated code?

|

Collectives™ on Stack Overflow

Getting error when printing json array in EJS variable on console

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related