使用 Spring MVC 访问 Javascript 中的模型属性 [英] Access to a model attribute in Javascript with Spring MVC

问题描述

我在 Javascript 中访问模型属性时遇到了一些问题；特别是我有这个控制器:

I have some problem accessing to model attribute in Javascript; in particular I have this controller:

    @RequestMapping(value = "/dashboard")
    public ModelAndView home(HttpServletRequest request, HttpServletResponse 
    res, Model model) {
        // Return answer's dictionary from DB to dashboard view
        CompQuest dizRisp = new CompQuest();
        dizRisp.setDizComp(dashDao.getRispEnd());
        model.addAttribute("dizRisp", dizRisp);

        return new ModelAndView("dashboard");    
    }

我有这个 Javascript 文件(这里:只有我想引用模型属性的图表代码部分)，我想从我的控制器访问模型属性dizRisp":

and I have this Javascript file (here: only the part with the code for my chart where I want to refer to model attribute) where I want to access to model attribute "dizRisp" from my controller:

var ctx1 = document.getElementById('myChart1').getContext('2d');
var myRadarChart = new Chart(ctx1, {
    type: 'radar',
    data: {
        labels: ['Valori e identità del SCN', 'La cittadinanza attiva',
              'Il giovane volontario nel sistema del SC', 'Lavorare',
              'Prevenzione e protezione', 'Normativa sicurezza',
              'Rischi sulla salute in tema di ambiente'
        ],
        datasets: [{
            label: "Civiche",
            data: [4, 5, 5, 2, 4, 5, 4],
            fill: true,
            borderJoinStyle: "round"
        }],
    },
    options: {
        maintainAspectRatio: false,
        scale: {
            ticks: {
                stepSize: 1,
                step: 1,
                beginAtZero: true,
                max: 5
            }
        }
    }
});

我的课程是(这里:没有 getter 和 setter):

My classes are (here: no getters and setters):

public class CompQuest {
private HashMap <String, CompRisp> dizComp;}

public class CompRisp {
private ArrayList <Risposte> rispList = new ArrayList <Risposte> ();}

public class Risposte {
int id;
Domande domande;
int valore;
int momento; }

public class Domande {
int id;
String testo;
String descrizione;
Questionario questionario; }

我的 .jsp 文件:

My .jsp file:

<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script>
<script src="resources/dashboard.js" type="text/javascript"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/dashboard.css">
<title>Dashboard</title>
<style>
    @import url('https://fonts.googleapis.com/css?family=Bitter|Roboto+Condensed');
    @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

特别是我想访问我的模型属性 (Hashmap)，以便将我的 Hashmap 中我的 Javascript 图表值的标签和数据集字段放入其中，该 Hashmap 包含我的数据库中的数据.

In particular I would want to access to my model attribute (Hashmap) in order to put in label and datasets field of my Javascript chart values from my Hashmap that contains data from my Database.

提前感谢所有可以帮助我的人！

Thanks in advance to everyone that can help me!

推荐答案

Spring 控制器

    @RequestMapping(value = "/dashboard")
    public ModelAndView home(HttpServletRequest request, 
    HttpServletResponse 
    res, Model model) {

        // Return answer's dictionary from DB to dashboard view
        CompQuest dizRisp = new CompQuest();
        dizRisp.setDizComp(dashDao.getRispEnd());

        Gson gson = new Gson() ;
        // Use Gson dependency to convert hashmap to String

        String strmap = gson.toJson(dizRisp)
        model.addAttribute("dizRisp", strmap);

        return new ModelAndView("dashboard");    
    }

Javascript

<script>
    
   $(document).ready(function(){

    var element = JSON.parse('${dizRisp}');

    $.each( element , function( key, value ) {
        
         console.log(key);
         console.log(value);

    });
  
   });
  

</script>

希望这就是您想要实现的目标.

Hope this is what your trying to achieve.

这篇关于使用 Spring MVC 访问 Javascript 中的模型属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！