spring - how to pass string to javascript on html?

Question

I'm trying to implement a d3 js graph into my application. I'm following the example described here. This was developed by the author of the library and it works nicely. I'm creating a json String manually (and hard-coded!) for tests now and I want to pass it from the controller to the HTML for rendering.

The D3Service classis:

public String buildGraphJsonFromId(String id) {
    LOG.debug("Generating graph JSON data for id: " + id);
    return buildJson(id);
}

protected String buildJson(String id) {
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Clifford Shanks\",");
    stringBuilder.append("\"born\": 1862,");
    stringBuilder.append("\"died\": 1906,");
    stringBuilder.append("\"location\": \"Petersburg, VA\",");
    stringBuilder.append("\"parents\": [");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"James Shanks\",");
    stringBuilder.append("\"born\": 1831,");
    stringBuilder.append("\"died\": 1884,");
    stringBuilder.append("\"location\": \"Petersburg, VA\",");
    stringBuilder.append("\"parents\": [");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Robert Shanks\",");
    stringBuilder.append("\"born\": 1781,");
    stringBuilder.append("\"died\": 1871,");
    stringBuilder.append("\"location\": \"Ireland/Petersburg, VA\"");
    stringBuilder.append("},");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Elizabeth Shanks\",");
    stringBuilder.append("\"born\": 1795,");
    stringBuilder.append("\"died\": 1871,");
    stringBuilder.append("\"location\": \"Ireland/Petersburg, VA\"");
    stringBuilder.append("}");
    stringBuilder.append("]");
    stringBuilder.append("},");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Ann Emily Brown\",");
    stringBuilder.append("\"born\": 1826,");
    stringBuilder.append("\"died\": 1866,");
    stringBuilder.append("\"location\": \"Brunswick/Petersburg, VA\",");
    stringBuilder.append("\"parents\": [");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Henry Brown\",");
    stringBuilder.append("\"born\": 1792,");
    stringBuilder.append("\"died\": 1845,");
    stringBuilder.append("\"location\": \"Montgomery, NC\"");
    stringBuilder.append("},");
    stringBuilder.append("{");
    stringBuilder.append("\"name\": \"Elizabeth Shanks\",");
    stringBuilder.append("\"born\": 1793,");
    stringBuilder.append("\"died\": 1882,");
    stringBuilder.append("\"location\": \"Montgomery, NC\"");
    stringBuilder.append("}");
    stringBuilder.append("]");
    stringBuilder.append("}");
    stringBuilder.append("]");
    stringBuilder.append("}");
    return stringBuilder.toString();
}

The D3Controller is:

@RequestMapping("/graph")
public void buildJsonForGraph(ModelMap modelMap) {
    modelMap.addAttribute("d3Data", buildD3GraphData("id"));
    System.out.println(buildD3GraphData("id"));
}

protected String buildD3GraphData(String id) {
    // service layer method call to deliver the specific json
    return d3Service.buildGraphJsonFromId(id);
}

And the start of the <script /> session of the HTML is defined by:

<script th:inline="javascript" type="text/javascript">
    $(document).ready(function () {
        var graphData = '${d3Data}';
        alert(graphData);
        // continued javascript detailed on the example
    });
</script>

What I want to do here is, when the page is loaded, the json text string will be passed to the javascript and the tree rendered.

Instead I get nothing. What am I missing here?

Michael Peacock · Accepted Answer · 2017-10-10 15:35:19Z

1

If you're using JSTL, you can do something like:

<script th:inline="javascript" type="text/javascript">
    $(document).ready(function () {
        var graphData = '<c:out value="${d3Data}"/>';
        alert(graphData);
        // continued javascript detailed on the example
    });
</script>

answered Oct 10, 2017 at 15:35

Michael Peacock

2,1141 gold badge13 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

spring - how to pass string to javascript on html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related