Accessing Json array in EJS file script tag

Question

I want to access a JSON array inside the script tag of a EJS file. I'm passing the JSON array from my index.js file to the EJS file while rendering it. The code is:

sampleJArr=["data1","data2","data3"];
app.get('/test', function(req,res){
res.render('testfile',{
 'mJsonArr': sampleJArr
});

In the EJS file (testfile.ejs), code-:

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= <%= mJsonArr[0] %>
    console.log(JsonData)
  }
</script>

Error:-Uncaught ReferenceError: myFunc is not defined at HTMLButtonElement.onclick

But when I'm trying to do a console("some string") inside myFunc then it's not giving that error. Only when I'm accessing mJsonArr inside the script tag, I'm getting UncaughtRefrence error. How can I access the passed mJsonArr inside my script tag ? Please contribute. Thankyou.

yue you · Accepted Answer · 2018-02-03 14:46:27Z

1

The reason why you can not access mJsonArr[0] in your script tag is because EJS just replace <%= mJsonArr[0] %> to data1 which means your generated html will be like

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= data1
    console.log(JsonData)
  }
</script>

In which there are 2 points are wrong

onClick="myFunc"

This need to be changed to onClick="myFunc()". Otherwise it will never invoke.

var JsonData= data1

This is not assigning a string value 'data1' to variable. It is assigning a value of a variable named 'data1' to variable JsonData.

The correct way to do this should be

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc()">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= '<%= mJsonArr[0] %>'
    console.log(JsonData)
  }
</script>

Hope it can help you

answered Feb 3, 2018 at 14:46

yue you

2,2641 gold badge14 silver badges31 bronze badges

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

2 Comments

alfheimrShiven Over a year ago

Thanks man, it worked perfectly. I got your explanation too :)

yue you Over a year ago

Glad I can help. If possible please mark my answer as correct

Collectives™ on Stack Overflow

Accessing Json array in EJS file script tag

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related