Question

164

How to access model attribute in Javascript

rated 0 times [ 169] [ 5] / answers: 1 / hits: 86567 / 13 Years ago, mon, february 20, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tomas

Add To Favorites

Follow

Total Points: 165

Total Questions: 111

Total Answers: 103

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

tomas questions

1 Restore scroll position when navigating with React Router 6

Thu, Jan 27, 22, 00:00, 2 Years ago

1 Chart.js remove gridline

Mon, May 10, 21, 00:00, 3 Years ago

1 Axios Error 401 (Unauthorized) Error when trying to fetch api

Thu, Mar 4, 21, 00:00, 3 Years ago

1 How do I wait for this animation to finish before moving on to the next one?

Mon, Feb 22, 21, 00:00, 3 Years ago

1 How to set html input tag width fit-content in css

Tue, Jan 5, 21, 00:00, 3 Years ago

View All

answered 13 Years ago dahlias · Accepted Answer

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.