transferring data from grails to javascript via a map

I am facing an issue with passing a Map object from my Grails controller to JavaScript. The code snippet in my controller is as follows:

def scoreValue = new HashMap<String,String>();
scoreValue.put("0","poor");
scoreValue.put("1","good");
...

return (view:'viewname', model:[scoreValue:scoreValue]);

I have been searching for a solution and came across this link pass a groovy array to javascript code, but it did not resolve my problem.

To try and solve the issue, I modified the return statement to

return (view:'viewname', model:[scoreValue:scoreValue as grails.converters.JSON])
and then inside my GSP view, I used the following code.

<g:if test="${scoreValue}">
     var scoreValue=${scoreValue};
</g:if>

However, when I checked the HTML page, I saw the following output:

 var scoreValue={&quot;0&quot;:&quot;Failure&quot;,&quot;1&quot;:&quot;Poor&quot;}

Any assistance on this matter would be greatly appreciated. Thank you!

javascriptjsongrailsdictionary

Answer №1

When it comes to GSP encoding, there are multiple ways to handle it. Along with D. Kossatz's solution, you can explore these alternatives (for more information visit mrhaki's informative Grails Goodness blog)

 var scoreValue=${raw(scoreValue)};

 var scoreValue=${scoreValue.encodeAsRaw()}

It's important to note the potential risk of cross-site scripting vulnerabilities if user input is displayed on the page without protection. As long as you have absolute confidence that only authorized individuals can modify the value and implement appropriate safety measures to verify its validity, you should be in good shape.

Answer №2

Consider using this:

let encodedValue = <g:useCodec encodeAs="none">${scoreValue}</g:useCodec>;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the Vue 3 Composition API: A guide to efficiently utilizing it across multiple Vue instances spread across different files

tl;dr What is the best way to import Vue3 in a base Javascript file and then utilize Vue's composition API in subsequent standalone files that will be loaded after the base file? I incorporate Vue to improve user interactions on specific pages like t ...

javascriptvue.jswebpackvuejs3vue-composition-api

Unable to display information from a repeated `textarea` in ngRepeat

Check out my code on Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L I'm trying to log the content of each textarea when typing, using the printStuff() function: $scope.printStuff = function(customize, item) { console.log(customize[item.inde ...

javascripthtmlangularjs

Having trouble with updating PHP MySQL data using serializeArray?

My HTML page includes a display of temperature with two buttons - one for updating MySQL with the temperature setting and the other for toggling on/off data. Previously, everything was functioning correctly with the initial code: function myFunction() { ...

javascriptphpmysql

How to Modify the Data in a Dynamic Object within the Vuex Store in a Nuxt Application

Within my Vue/Nuxt project, I have implemented a form where users can add and update dynamic fields for calculating price offers. Upon loading the form, one field is created using the beforeMount lifecycle, with the option for users to add more fields as n ...

javascriptarraysvue.jsnuxt.jsvuex

Is it a good idea to relocate the document.ready function into its own JavaScript function?

Can the following code be placed inside a separate JavaScript function within a jQuery document.ready, allowing it to be called like any other JavaScript function? <script type="text/javascript"> $(document).ready(function() { $('div#infoi ...

javascriptjquery

The property was computed but cannot be set - specifically for a toggle component

I am currently working on developing a switch toggle component in Vue that includes a v-model and @updated. However, I am encountering difficulties when trying to update the model once the user toggles the switch. Initially, I faced an issue regarding muta ...

javascriptvue.js

Utilizing $.getJSON to initiate a selection change event

I'm currently working on implementing a feature that involves adding categories to a dropdown list using jQuery Ajax. The goal is to load subcategories when a particular option is selected. However, I've encountered an issue where the addition o ...

javascriptjquery

I'm currently leveraging Vue.js and Python Flask for my backend development. I'm looking to establish some local variables. What is the best way to accomplish this?

Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout. <template> <div> <div class="glob ...

javascriptvue.js

Manipulating the size of a square using gestures and touch events for seamless resizing

I am trying to center a blue square with the ID #square both vertically and horizontally in my viewport on my iOS device... <div id="square"></div> #square { width:100px; height:100px; background:blue; margin:0 auto; } I want ...

javascriptjqueryiostouchgesture

When converting to .glb format, the material becomes invisible unlike in .gltf files

After exporting a model using the glTF exporter in Blender 2.8, I noticed that when exporting to .glb format, the texture is no longer visible. Strangely, when I view the .glb file in the glTF Viewer from it appears fine, but in my environment and in the ...

javascriptthree.jsgltf

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...

javascriptjqueryajax

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

javascripthtmlcssangulartypescript

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Delaying the activation of the code until the image upload is complete

I'm having trouble synchronizing code to upload an image using a vue composable, wait for the upload to finish, and then store the Firebase storage URL into a database. Despite getting the URL, the success code fires before the upload is complete. My ...

javascriptvue.jsgoogle-cloud-firestorefirebase-storage

Error: Unable to access the 'CustomerId' property because it is undefined

Recently, I made some updates to my website. As part of the upgrade process, I switched to AngularJS v1.7.6 and JQuery v1.12.1. However, after making these changes, I encountered an error in my console log. TypeError: Cannot read property 'CustomerId ...

javascriptjqueryangularjs

When attempting to send an email using the emailjs.send function, an unexpected error occurred showing the URL https://api.emailjs.com/api/v1.0/email/send with a

import emailjs from 'emailjs-com'; async function sendEmail() { try { const serviceID = '...'; const templateID = '...'; const userID = '...'; const emailParams = { to_email: '...&a ...

javascriptreactjs

Enzyme locates and chooses the initial occurrence of an element

I am attempting to simulate a click on the initial box out of three. My React script appears as follows: const Boxes = (props) => { return ( <div className="container"> <div onClick={props.showMessage} className="box">One& ...

javascriptreactjsenzyme

The Ultimate Guide to Automatically Updating JSON File URLs

I am currently working on a project where I need to retrieve data from a URL using the $.getJSON method. I am interested in finding a way to continuously update this data and replace it in the HTML without needing to manually refresh the page. Although I h ...

javascriptjqueryhtmlajaxjson

transforming log data from JSON format into individual columns, resulting in a separate file for each column

Here is an example from a log file: {"timestamp": "2022-01-14T00:12:21.000", "Field1": 10, "Field_Doc": {"f1": 0}} {"timestamp": "2022-01-18T00:15:51.000", "Field_Doc": {"f ...

pythonjsonfilefile-handlinglogfile

Is it possible to load a JS file using Node.js's `

Is there a way to load the contents of a js file into a variable without it returning as an object? How can I achieve this? server.js const file = require("./server/file.js"); ctx.body = `${file}`; // The expected output is "(function () { ...

javascriptnode.js