Cannot access the items of the json array declared in EJS inside Javascript script tags

Question

<div>  
    var arrayContent='<%= myJsonArray %>'
 <!--myJsonArray is sent to this ejs file using the render function in
 index.js while rendering this ejs file -->
</div>
<script>
  var index=0;
  function myfunc(){
  console.log(arrayContent); /*[object Object],[object Object],[object 
                                Object],[object Object] */

  var arrContentJson= JSON.parse(arrayContent);
  console.log(arrContentJson[index]); /* Uncaught SyntaxError: Unexpected 
                                         token o in JSON at position 1 */
   }
     </script>

Why am I not able to access the content of the parsed Json array (arrContentJson). How can I access it ?

myJsonArray is probably an array, not JSON representing an array. (You also have <div> tags here instead of <script>.) It isn’t safe to put arbitrary JSON directly in <script> tags, though; you need to use escaping specifically designed for that purpose. (If you implement that, you should test that it’s working by making sure < is escaped as \x3c.) — Ry-
– Ry- ♦, Commented Feb 5, 2018 at 16:04
better to put a debug point at var arrayContent='<%= myJsonArray %>' and watch the variable content. — Sanka
– Sanka, Commented Feb 5, 2018 at 16:05
I think that the console.log logs you provided are not correct. Initially arrayContent is a string. How does it look like? The error you get should happen at the line with JSON.parse() — Catalin
– Catalin, Commented Feb 5, 2018 at 16:06
It looks like there's no need to call JSON.parse(). If you're passing JSON via an EJS template, it should load in that script as an object literal, not a string. Just remove the quotes around <%= myJsonArray %> — Patrick Roberts
– Patrick Roberts, Commented Feb 5, 2018 at 16:22
What confuses me is why you have JavaScript inside a <div>. — Patrick Roberts
– Patrick Roberts, Commented Feb 5, 2018 at 16:24

YouneL · Accepted Answer · 2018-02-19 13:03:07Z

2

It looks like you want to pass an array from ejs to the javascript code inside <script> tag, to do that you should use unescaped interpolation <%- %>:

<script>

    var arrayContent= <%- JSON.stringify(myJsonArray) %>;

    var index=0;

    function myfunc(){
        console.log(arrayContent);

        var arrContentJson= JSON.parse(arrayContent);
        console.log(arrContentJson[index]);
    }

    myfunc();

</script>

edited Feb 19, 2018 at 13:03

answered Feb 7, 2018 at 17:00

YouneL

8,3692 gold badges30 silver badges52 bronze badges

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

6 Comments

alfheimrShiven Over a year ago

No it's not working. It's not giving any specific error as such. Just saying: myfunc is not defined.

YouneL Over a year ago

Does myJsonArray a json string or javascript object ?

alfheimrShiven Over a year ago

It's a JSON array.

YouneL Over a year ago

try to use var arrayContent= <%- JSON.stringify(myJsonArray) %>; instead

alfheimrShiven Over a year ago

Okay this works and I'm able to get the elements out of arrayContent. But I have a doubt. What I know is that to access the elements of a JSON array, it should be a pure Json array and not a stringified version of it, right ? But in my case when I try to parse arrayContent which is a stringified version of JSON array back to JSON and access the element of the array like arrayContent[0].col[0], I get an error "Unexpected token o in JSON at position 1" but when I'm accessing the elements from the stringified version i.e. directly from arrayContent without parsing it to JSON, it works! How ?

|

nebulae · Accepted Answer · 2018-02-05 16:08:52Z

0

Possibly removing the single quotes around the '<%= myJsonArray %>' will work, but it appears you're parsing already valid json. console.log(arrayContent[0]) instead.

answered Feb 5, 2018 at 16:08

nebulae

2,6651 gold badge20 silver badges16 bronze badges

6 Comments

alfheimrShiven Over a year ago

No it doesn't work. it gives me an error Uncaught ReferenceError: myfunc() is not defined. It doesn't give anything specific as such. That is why I tried accessing myJsonArray as a String so that I could console it out and then I parse it back to JSON to access the content. Look at the console logs that I have commented. Thanks

nebulae Over a year ago

[object Object],[object Object],... implies one of 2 things: it's already correctly parsed json, meaning you don't need to JSON.parse() it, or that is the literal string content of the myJsonArray variable. I suspect 'myFunc()' is undefined because of a missing semicolon after the json without single quotes, but that begs the question why you're declaring the json outside the script element inside a div. this would be easy to debug in dev tools, is the output in the console.log a string or an object?

alfheimrShiven Over a year ago

I know that it is parsed json but I had converted it into string so that I could log it out in the console. After that I'm parsing it back to Json so that I can access the content but I'm getting Uncaught SyntaxError: Unexpected token o in JSON at position 1. My actual Json content is : [ 'col1':[ 'data1', 'data2' ], 'col2':[ 'data1', 'data2' ], 'col3':[ 'data1', 'data2' ], 'col4':[ 'data1', 'data2' ] ]

nebulae Over a year ago

you can log objects to the console, they don't have to be strings.

nebulae Over a year ago

"Unexpected token o in JSON at position 1" means it's trying to parse the string '[object Object... ' as json, which means the '<%= myJsonArray %>' is a string containing the text '[object Object...'. remove the quotes, add a semicolon, and don't JSON.parse() it. you'll be able to access arrayContent[0] at that point.

|

Collectives™ on Stack Overflow

Cannot access the items of the json array declared in EJS inside Javascript script tags

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related