The user interface is presented with an array labeled as [object Object]

Question

The user interface is presented with an array labeled as [object Object]

Currently working on a website using JavaScript, express.js, ejs, and Node.js and encountered a puzzling issue.

The data is being sent to the frontend in the following manner:

const dataToSend = [
  {
    id: "ID",
    name: "Name"
  },
  {
    id: "ID",
    name: "Name"
  }
]

res.render('configure', {
    array: dataToSend
});

To retrieve it on the frontend using ejs, this method is employed:

<%= array %>

If the array is printed on the frontend, it displays as [object Object]. Further investigation by printing out typeof('<%= array %>') indicates that it is of type string.

Although I have come across some related discussions, none seem to provide a solution to this dilemma. Seeking advice on how to handle this situation correctly. Thank you.

javascript arrays ejs

Answer 1

Answer №1

The issue at hand is that the array is being mistakenly transformed into a string. In JavaScript, objects ({...}) come with a toString function which typically presents the result as [object Object].

To tackle this problem, it's crucial to prevent the array from getting converted into a string.

When working with EJS, you have a diverse range of tags available:

Tags
<% 'Scriptlet' tag, for controlling flow without displaying output
<%_ ‘Whitespace Slurping’ Scriptlet tag, removes any preceding whitespace
<%= Inserts the value into the template (HTML escaped)
<%- Inserts the value unescaped into the template
<%# Comment tag, no execution or output
<%% Outputs a literal '<%'
%> Standard closing tag
-%> Trim-mode ('newline slurp') tag, trims following newline characters
_%> ‘Whitespace Slurping’ ending tag, eliminates all subsequent whitespace

source:

If you're searching for a solution, consider using: <%- to display the array after using JSON.stringify.

<%- JSON.stringify(array) %>

Answer 2

The issue at hand is that the array is being mistakenly transformed into a string. In JavaScript, objects ({...}) come with a toString function which typically presents the result as [object Object].

To tackle this problem, it's crucial to prevent the array from getting converted into a string.

When working with EJS, you have a diverse range of tags available:

Tags
<% 'Scriptlet' tag, for controlling flow without displaying output
<%_ ‘Whitespace Slurping’ Scriptlet tag, removes any preceding whitespace
<%= Inserts the value into the template (HTML escaped)
<%- Inserts the value unescaped into the template
<%# Comment tag, no execution or output
<%% Outputs a literal '<%'
%> Standard closing tag
-%> Trim-mode ('newline slurp') tag, trims following newline characters
_%> ‘Whitespace Slurping’ ending tag, eliminates all subsequent whitespace

source:

If you're searching for a solution, consider using: <%- to display the array after using JSON.stringify.

<%- JSON.stringify(array) %>

Answer 3

Answer №2

Have you tried assigning the array in a script? If so, it may be returning as a string. Here's a different approach to try: First, outside of the script tag, stringify the JSON data and assign it to a variable like this:-

<% let newArray = JSON.stringify(array) %>

Next, within the script tag, parse the EJS local variable newArray. Here is how you can do it:

<script>
let assignedArray = JSON.parse("<%- newArray %>");
</script>

Answer 4

Have you tried assigning the array in a script? If so, it may be returning as a string. Here's a different approach to try: First, outside of the script tag, stringify the JSON data and assign it to a variable like this:-

<% let newArray = JSON.stringify(array) %>

Next, within the script tag, parse the EJS local variable newArray. Here is how you can do it:

<script>
let assignedArray = JSON.parse("<%- newArray %>");
</script>

The user interface is presented with an array labeled as [object Object]

Answer №1

Answer №2

Similar questions

I am curious about why I am unable to utilize inline functions in component props. Could you please provide a detailed explanation and perhaps give an example to illustrate? Furthermore, what is

Unable to identify the C++ data type

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

Jest - Silence greets the test results

Locating the index of the largest element in an array using Java

What exactly is the purpose of editing a host file?

Stopping Popups in Chrome When Printing with JavaScript

What is the best way to invoke functions in PHP based on their location in the code?

Saving the current date and time in PHP and JS to persist even after the browser has been closed

Is it not possible to cast the incorrect type of the Typescript array.from(iterator)?

Find the location where the function is declared

Angularjs scope's parent id

Transform an array with diverse keys in multiple dimensions into a CSV file with column headers

Substitute names and make copies in a bash associative array

What steps should I take to enable peer-to-peer payments within my application?

How to use AngularJS to parse JSON containing backslashes

Can you explain the distinction between $scope.$root and $rootScope?

Javascript troubleshooting: Confusion with Radiobuttons and Checkboxes 'checked' status

How to populate the space beneath the `AreaChart` curve in `recharts` when data includes positive and negative values

Struggling to sift through words within the strainer