How to access Spring MVC model object in javascript file?

Question

I am using spring 3 MVC and i have below classes.

External system would call my application using below URL:

http://somehost/root/param1/param2/param3

I have a spring MVC controller method as below:

public ModelAndView showPage(@PathVariable("param1") String paramOne, @PathVariable("param2") String paramTwo, @PathVariable("param3") String paramThree, HttpServletResponse response) {  
        SomeModel model = new SomeModel(paramOne, paramTwo, paramThree);
       return new ModelAndView("SomeJsp", "model", model);
    }

SomeModel.java

public class SomeModel{
 private String paramOne;
 private String paramTwo;
 private String paramThree;
//constructor
 //setters and getters

}

SomeJsp.jsp

//In this Jsp i have a div with few elements. Div is not visible by default.
//This jsp has externalJavascript included.
//I enable div and set the data into div elements using jquery.
<script src="<c:url value="/resources/js/extjs.js" />" type="text/javascript"></script>

externalJs.js

$(document).ready(function() {

    //Here i need the model returned using ModelAndView
//I can get data from model and set into div elements.


});

In external java script file, is it possible to get the model content? If possible, how can i do that?

Thanks!

<script type="text/javascript">var myVar = "${model.paramOne}";</script> — GriffeyDog
– GriffeyDog, Commented Mar 19, 2014 at 14:48

Aurand · Accepted Answer · 2014-09-09 17:35:13Z

33

JavaScript is run on the client side. Your model does not exist on the client side, it only exists on the server side while you are rendering your .jsp.

If you want data from the model to be available to client side code (ie. javascript), you will need to store it somewhere in the rendered page. For example, you can use your Jsp to write JavaScript assigning your model to JavaScript variables.

Update:

A simple example

<%-- SomeJsp.jsp --%>
<script>var paramOne =<c:out value="${paramOne}"/></script>

edited Sep 9, 2014 at 17:35

answered Mar 19, 2014 at 14:24

Aurand

5,5571 gold badge28 silver badges35 bronze badges

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

5 Comments

user755806 Over a year ago

Aurand, Could you please provide me some code snippet for your answer? Thanks!

user755806 Over a year ago

Aurand, now can i access paramOne in an external js included in same jsp?

Aurand Over a year ago

paramOne is a JavaScript variable. Just access it by name.

Walls Over a year ago

That first paragraph opened my eyes and made things a lot clearer. Thanks.

Ross Llewallyn Over a year ago

I was getting errors implying it was interpreting this example as a regular expression. Once I did <script>var JsParam = "${JavaParam}"</script> (note the quotes), it worked.

Alessandro Dionisi · Accepted Answer · 2015-01-21 09:43:23Z

20

Another solution could be using in JSP: <input type="hidden" id="jsonBom" value='${jsonBom}'/>

and getting the value in Javascript with jQuery:

var jsonBom = $('#jsonBom').val();

answered Jan 21, 2015 at 9:43

Alessandro Dionisi

2,7146 gold badges34 silver badges38 bronze badges

Comments

Splash · Accepted Answer · 2014-09-09 03:06:04Z

11

I recently faced the same need. So I tried Aurand's way but it seems the code is missing ${}. So the code inside SomeJsp.jsp <head></head>is:

<script>
  var model=[];
  model.paramOne="${model.paramOne}";
  model.paramTwo="${model.paramTwo}";
  model.paramThree="${model.paramThree}";
</script>

Note that you can't asssign using var model = ${model} as it will assign a java object reference. So to access this in external JS:

$(document).ready(function() {
   alert(model.paramOne);
});

answered Sep 9, 2014 at 3:06

Splash

1,2882 gold badges19 silver badges36 bronze badges

Comments

Juan Furattini · Accepted Answer · 2015-11-21 13:16:05Z

8

This way works and with this structure you can create your own framework and do it with less boilerplate.

Sorry if some error is present, I'm writing this handly with my cellphone

Maven dependency:

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>1.7.1</version>
</dependency>

Java:

Person.java (Person Object Class)

Class Person {

    private String name;

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

PersonController.java (Person Controller)

@RestController
public class PersonController implements Controller {

    @RequestMapping("/person")
    public ModelAndView handleRequest(HttpServletRequest arg0, HttpServletResponse arg1) throws Exception {
        Person person = new Person();
        person.setName("Person's name");
        Gson gson = new Gson();

        ModelAndView modelAndView = new ModelAndView("person");
        modelAndView.addObject("person", gson.toJson(person));

        return modelAndView;
    }
}

View:

person.jsp

<html>
    <head>
        <title>Person Example</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="personScript.js"></script>
    </head>
    <body>
        <h1>Person/h1>
        <input type="hidden" id="person" value="${person}">     
    </body>
</html>

Javascript:

personScript.js

function parseJSON(data) {
    return window.JSON && window.JSON.parse ? window.JSON.parse( data ) : (new Function("return " + data))(); 
}

$(document).ready(function() {
    var personJson = $('#person');
    person = parseJSON(personJson.val());
    alert(person.name);
});

edited Nov 21, 2015 at 13:16

answered Nov 21, 2015 at 7:27

Juan Furattini

8037 silver badges9 bronze badges

2 Comments

hotzst Over a year ago

Could you please add some explanation on the magic that happens especially in the JS part?

deadend Over a year ago

i follow this.. i got json parse exception "Uncaught SyntaxError: Unexpected end of JSON input" when i print personJson.val() -> alert shows "{"

tObi · Accepted Answer · 2014-06-30 16:29:01Z

5

Here is an example of how i made a list object available for javascript:

var listForJavascript = [];
<c:forEach items="${MyListFromJava}" var="listItem">
  var arr = [];

  arr.push("<c:out value="${listItem.param1}" />");
  arr.push("<c:out value="${listItem.param2}" />");

  listForJavascript.push(arr);
</c:forEach>

answered Jun 30, 2014 at 16:29

tObi

1,9423 gold badges20 silver badges32 bronze badges

Comments

Max Vasileuski · Accepted Answer · 2014-03-19 14:25:55Z

1

You can't access java objects from JavaScript because there are no objects on client side. It only receives plain HTML page (hidden fields can help but it's not very good approach).

I suggest you to use ajax and @ResponseBody.

answered Mar 19, 2014 at 14:25

Max Vasileuski

2,6511 gold badge22 silver badges33 bronze badges

1 Comment

user755806 Over a year ago

Max, here i cannot make ajax call, since controller is being called from external application and is directly mapped to controller method.

bharath sc · Accepted Answer · 2019-07-31 09:22:40Z

0

in controller:

JSONObject jsonobject=new JSONObject();
jsonobject.put("error","Invalid username");
response.getWriter().write(jsonobject.toString());

in javascript:

f(data!=success){



 var errorMessage=jQuery.parseJson(data);
  alert(errorMessage.error);
}

answered Jul 31, 2019 at 9:22

bharath sc

1

Comments

h.meknassi · Accepted Answer · 2020-05-17 03:37:57Z

0

   @RequestMapping("/op")
   public ModelAndView method(Map<String, Object> model) {
       model.put("att", "helloooo");
       return new ModelAndView("dom/op");
   }

In your .js

<script>
    var valVar = [[${att}]];
</script>

answered May 17, 2020 at 3:37

h.meknassi

1878 bronze badges

Comments

manoj Dintakurti · Accepted Answer · 2022-08-24 07:46:28Z

0

I have used a hidden tag and passed object to js.

<input type="hidden" id="jsonBom" value='${jsonBom}'/>

you can access value of the tag using id

answered Aug 24, 2022 at 7:46

manoj Dintakurti

213 bronze badges

Collectives™ on Stack Overflow

How to access Spring MVC model object in javascript file?

SomeModel.java

SomeJsp.jsp

externalJs.js

9 Answers 9

5 Comments

Comments

Comments

Maven dependency:

Java:

View:

Javascript:

2 Comments

Comments

1 Comment

in controller:

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

SomeModel.java

SomeJsp.jsp

externalJs.js

9 Answers 9

5 Comments

Comments

Comments

Maven dependency:

Java:

View:

Javascript:

2 Comments

Comments

1 Comment

in controller:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related