How to access model attribute in Javascript

Question

I want to access a model attribute in Javascript. I use the following code:

model.addAttribute("data", responseDTO);

My DTO class:

public class ResponseDTO {

    private List<ObjectError> errors;

    private Boolean actionPassed;

    private String dataRequestName;

    // and setter getter for all fields
}

I tried accessing the DTO using:

var data = "${data}";

But it is giving me a string representation of responseDTO instead, i.e com.req.dto.ResponseDTO@115f4ea. I can successfully access a field inside the DTO using:

 var data = "${data.actionPassed}";

But this is not working for the errors attribute inside the DTO, as it is a List of ObjectError. How can I get complete responseDTO object in Javascript?

Thanks!

EDIT :

Initially I was using jquery.post

$.post('ajax/test.html', function(data) {
  // Here I was able to retrieve every attribute even list of ObjectError.
});

Now I want to remove Ajax and want to convert it into non-ajax approach (because of some unavoidable reasons). So I am doing a normal form submit and want load same form again and trying to load data model attribute in Javascript so that I can keep the rest of the code as it is.
I was wondering if it can be achieved in Javascript as it is doable using Jquery post?

EDIT 2 :

I tried (Thank you @Grant for suggestions)

JSONObject jsonObject =JSONObject.fromObject(responseDTO);
String jsonString = jsonObject.toString();
model.addAttribute("data",jsonString);

and in Javascript

var data = eval('('+ ${dataJson} +')');   // Getting error on this line  
alert(data.actionPassed);

But getting error and no alert is displayed
Error :
enter image description here

Where do you want to access the object, within a JSP file or on client side after the DTO is returned by some AJAX call? — Ralph
– Ralph, Commented Feb 20, 2012 at 13:37
Before you continue, stop and consider: your model resides on the server, javascript happens on the client. Now, what is it you want to accomplish? — pap
– pap, Commented Feb 20, 2012 at 14:35
@Ralph: No I want to remove Ajax part. Please check my edit for more details. — Ajinkya
– Ajinkya, Commented Feb 20, 2012 at 15:32
@pap: Please check my edit and let me know if there is any right / better way to achieve this. — Ajinkya
– Ajinkya, Commented Feb 20, 2012 at 15:32

Grant Zhu · Accepted Answer · 2012-02-21 04:52:01Z

21

First of all, there's no way to convert a Java object to a Javascript object directly since they have nothing to do with each other. One is server-side language and the other is client-side language.

So to accomplish this goal, you have to do some convertion. I think you have two options:

Convert ResponseDTO object to JSON string and pass it to jsp and you may get the javascript object directly.
Pass ResponseDTO object to JSP and populate the javascript object as what you are trying now.

For option #1, you should use a library to generate JSON string by the Java object. You can use this one JSON-lib. e.g:

JSONObject jsonObject = JSONObject.fromObject( responseDTO );  
/*  
  jsonStr is something like below, "errors" represents the List<ObjectError>
  I don't know what's in ObjectError, errorName is just an example property.
  {
    "dataRequestName":"request1",
    "actionPassed":true,
    "errors":[{"errorName":"error"},{"errorName":"unknown error"}]
  } 
*/
String jsonStr = jsonObject.toString();
model.addAttribute("dataJson", jsonStr);  

/*In JSP, get the corresponding javascript object
 by eval the json string directly.*/
<script>
var data = eval('('+'${dataJson}'+')'); 
</script>

For option #2,

//Pass java object as you do now
model.addAttribute("data",responseDTO);

//In JSP, include jstl taglib to help accessing List.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script>
var errorArr = [], errorObj;
<c:forEach var="error" items="${data.errors}">
    errorObj = { errorName: '${error.errorName}' };
    errorArr.push(errorObj);                                  
</c:forEach>

//Populate the corresponding javascript object.
var data = {
  dataRequestName: '${data.dataRequestName}',
  actionPassed: ${data.actionPassed},
  errors: errorArr
};
</script>

As you can see, option #2 is complicated and only useful if the Java object is simple while option #1 is much easier and maintainable.

edited Feb 21, 2012 at 4:52

answered Feb 20, 2012 at 14:49

Grant Zhu

3,0183 gold badges26 silver badges29 bronze badges

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

9 Comments

Ajinkya Over a year ago

Thanks a lot for showing both easy and hard ways. In option #1 can I access all the attribute using data.? Also please check my edit I have added more details.

Grant Zhu Over a year ago

@Ajinkya Yes. You can access all attributes like using java object. The only difference is "errors" is represented as an array. I'm not sure I understand your edit correctly..You said you were able to retrieve every attribute even list of ObjectError by jquery.post, so why is this question raised? What's in ajax/test.html ?

Ajinkya Over a year ago

I was able to access it in Ajax callback ie in function defined in jquery post. but now I want to remove Ajax so I want access the model attribute in Javascript.

Ajinkya Over a year ago

I did exactly same as you suggested. but getting error missing ) in parenthetical (NaN Source File: http://localhost:7009/portal/request/form/submit Line: 1011, Column: 4 Source Code: (NaN

Grant Zhu Over a year ago

@Ajinkya option 1 or 2? Could you give more details? what's in line 1011?

|

Nathan Hanna · Accepted Answer · 2014-03-18 18:24:26Z

2

So I just implemented a similar solution to Grant's first option with a List of objects, but used the Gson library to convert the object to a JSON string, then used JSON.parse() to turn it into a javascript object:

On the server:

List<CustomObject> foo = database.getCustomObjects();
model.addAttribute("foo", new Gson().toJson(foo));

In the page javascript:

var customObjectList = JSON.parse('${foo}');
console.log(customObjectList);

Notice that when I reference the model object foo, that I do so as a string '${foo}'. I believe you are getting your error because you reference it outside of a string. So the correct code would be:

var data = eval('('+ '${dataJson}' +')');

answered Mar 18, 2014 at 18:24

Nathan Hanna

5,0433 gold badges32 silver badges33 bronze badges

1 Comment

Andrew Over a year ago

How would you deal with single quote characters in ${foo}? The JavaScript generated would end up as: var customObjectList = JSON.parse('{"foo":"bar's baz"}'); which is invalid. Using fn:replace is obvious, but also seems a bit hack-ish. Are there other special characters that need to be dealt with?

srinivas gowda · Accepted Answer · 2018-08-21 12:00:59Z

2

its very simple

in your spring controller 

model.addAttribute("attributeName", "attributeValue");

in the script

<script type="text/javascript">      
     $(window).on('load', function () {             
            var springAttribute= '${attributeName}';
            alert(springAttribute);     
    </script>

answered Aug 21, 2018 at 12:00

srinivas gowda

4965 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to access model attribute in Javascript

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related