How to get json data from controller in jsp?

Question

I want to populate my json data into d3 charts. But how to get json data from controller? Here rootVO is json file and i am passing to jsp but i don't know how to collect it and use it in jsp?

Controller class

@RequestMapping("/sunburst")
public String sunburstChart(Model model)
{
    model.addAttribute("jsonData", rootVO);
    return "sunburstChart";
}

Another jsp file from where i am calling that method

$.ajax
({
    url: "sunburst", 
    async: false, 
    success: function(data) 
    { 
        console.log(data); 
        $("#sunburstChart").append(data);
    }
});

Here is my sunburstChart.jspin which i want json data

<!DOCTYPE html>
<head>
    <title>Sunburst Tutorial (d3 v4), Part 3</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');

body {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<body>
    <svg></svg>
    <label><input class="sizeSelect" type="radio" name="mode" value="size" checked /> Size</label>
    <label><input class="sizeSelect"  type="radio" name="mode" value="count" /> Count</label>
</body>

<script>

    // Variables
    var width = 500;
    var height = 500;
    var radius = Math.min(width, height) / 2;
    var color = d3.scaleOrdinal(d3.schemeCategory20b);
    var sizeIndicator = "size";
    var colorIndicator = "sentiment";

    // Size our <svg> element, add a <g> element, and move translate 0,0 to the center of the element.
    var g = d3.select('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');


    // Create our sunburst data structure and size it.
    var partition = d3.partition()
        .size([2 * Math.PI, radius]);


    // Get the data from our JSON file
    d3.json(
         $.ajax
        ({
            type:"GET",
            dataType : 'json',
            url : '/sunburst',
            success : function(response) 
            {

            },
            error: function() {
                alert("asda");
            }
        });
        , function(error, nodeData) {
        if (error) throw error;


        // Find the root node, calculate the node.value, and sort our nodes by node.value
        var root = d3.hierarchy(nodeData)
            .sum(function (d) { return d.size; })
            .sort(function(a, b) { return b.value - a.value; });


        // Calculate the size of each arc; save the initial angles for tweening.
        partition(root);
        arc = d3.arc()
            .startAngle(function (d) { d.x0s = d.x0; return d.x0; })
            .endAngle(function (d) { d.x1s = d.x1; return d.x1; })
            .innerRadius(function (d) { return d.y0; })
            .outerRadius(function (d) { return d.y1; });


        // Add a <g> element for each node; create the slice variable since we'll refer to this selection many times
        var slice = g.selectAll('g')
            .data(root.descendants())
            .enter().append('g').attr("class", "node");


        // Append <path> elements and draw lines based on the arc calculations. Last, color the lines and the slices.
        slice.append('path').attr("display", function (d) { return d.depth ? null : "none"; })
            .attr("d", arc)
            .style('stroke', '#fff')
            .style("fill", function (d) { return color((d.children ? d : d.parent).data.name); });


        // Populate the <text> elements with our data-driven titles.
        slice.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
            .attr("dx", "-20")
            .attr("dy", ".5em")
            .text(function(d) { return d.parent ? d.data.name : "" });


        // Redraw the Sunburst Based on User Input
        d3.selectAll(".sizeSelect").on("click", function(d,i) {

            // Determine how to size the slices.
            if (this.value === "size") {
              root.sum(function (d) { return d.size; });
            } else {
              root.count();
            }

            partition(root);

            slice.selectAll("path").transition().duration(750).attrTween("d", arcTweenPath);
            slice.selectAll("text").transition().duration(750).attrTween("transform", arcTweenText);
        });
    });


    /**
     * When switching data: interpolate the arcs in data space.
     * @param {Node} a
     * @param {Number} i
     * @return {Number}
     */
    function arcTweenPath(a, i) {

        var oi = d3.interpolate({ x0: a.x0s, x1: a.x1s }, a);

        function tween(t) {
            var b = oi(t);
            a.x0s = b.x0;
            a.x1s = b.x1;
            return arc(b);
        }

        return tween;
    }

    /**
     * When switching data: interpolate the text centroids and rotation.
     * @param {Node} a
     * @param {Number} i
     * @return {Number}
     */
    function arcTweenText(a, i) {

        var oi = d3.interpolate({ x0: a.x0s, x1: a.x1s }, a);
        function tween(t) {
            var b = oi(t);
            return "translate(" + arc.centroid(b) + ")rotate(" + computeTextRotation(b) + ")";
        }
        return tween;
    }


    /**
     * Calculate the correct distance to rotate each label based on its location in the sunburst.
     * @param {Node} d
     * @return {Number}
     */
    function computeTextRotation(d) {
        var angle = (d.x0 + d.x1) / Math.PI * 90;

        // Avoid upside-down labels
        return (angle < 120 || angle > 270) ? angle : angle + 180;  // labels as rims
        //return (angle < 180) ? angle - 90 : angle + 90;  // labels as spokes
    }

</script>

Answer 1

You can't send json-data the way you have shown and achieve what you want. To do this you have can follow any one mentioned below:

read your json file, deserialize to a POJO and then send deserialized data from a separate controller-endpoint. Make sure you call your ajax method from client end on document ready state.
read your json file, deserialize to a POJO and then send with modelAttribute as you have done ie model.addAttribute("jsonData", deseriazedData); and read from controller side by JS like: var yourJsonData=${jsonData} , parse to jsonData with JSON.parse(yourJsonData) and then use that for your chart.

But make sure, all events like page loading then generating chart from this data are happening one after another in desired order. PS: search read json file and map to pojo if you find difficulties. If you are unsure or need more help, then state your json file data structure and your specific problem. I will try to help

How to get json data from controller in jsp?

Question

1 answers

solution1
0 ACCPTED 2019-09-25 10:27:12

How to get json data from controller in jsp?

Question

1 answers

solution1 0 ACCPTED 2019-09-25 10:27:12

solution1
0 ACCPTED 2019-09-25 10:27:12