I would like to pass a list of String from Spring Controller to Javascripts. The Controller :
@PostMapping("/level1")
public String login (Model model){
List<Question> questions = frageRepository.findAllQuestions();
List<String> questionText = questions.stream().map(Frage::getText).toList();
model.addAttribute("questionText", questionText);
log.info(spieler.toString());
return "level1";
}
the body of level1.html
<body>
<div class="container mx-auto">
<label class="text-center mt-4" id="thetext">Du liebst Abenteuer und möchte endlich reisen.
<br>
Du hast ein bisschen Geld und das reicht für ein Ticket zur nächsten Insel.<br>
Unglücklicherweise ist dein Schiff in einem Sturm gesunken. <br>
Du hat glück, an einen Strand zu landen. <br><br>
Jetzt musst du die Herausforderungen mit deinen SQL-Kenntnissen meistern.<br>
Je schneller du die Probleme löst, desto besser ist dein Ranking.<br><br>
Viel Spaß !!!<br>
</label>
<div class="d-flex justify-content-center">
<input id="startButton" onclick="myFunction()" class="btn-secondary mt-4"
type="button" value="next">
</div>
</div>
<script>
var questionText = [[${questionText}]];
</script>
<script th:src="@{/script/questions.js}"></script>
</body>
the question.js file
var i = 0;
function myFunction() {
document.getElementById("thetext").innerHTML = questionText[i];
i++;
}
How can i pass the list questionText to Javascripts code? I want that when the user clicks the next button, the browser will show him the next question in label "thetext" from the list. Or Is there another way to do this? I hope, you can understand me :(
Thank you very much !
just input th:inline="javascript" in the script tag
<script input th:inline="javascript">
var questionText = [[${questionText}]];
</script>