使用 Spring MVC 访问 Javascript 中的模型属性

Question

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

    @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”：

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）：

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 文件：

<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 图表值的标签和数据集字段。

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

Answer 1

弹簧控制器

    @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>

希望这是您努力实现的目标。