How to dynamically generate HTML tags in business, pass database data to them, and display them on the screen Since you taught me, I will give you a memo for yourself and practice writing articles.
Below is an example using DOM. HTML
display.html
<div class="content">
<p id=displayTitle>
title
</p>
<div id="displayBox" class="displayBox">
<!--This is where the dynamically generated p-tag goes!-->
</div>
</div>
Here, we simply generate an html file to put the dynamically generated p tag. The content of the div tag is empty because jQuery generates what you want to display in \ #displayBox.
display.js
$.ajax({
type: "GET",
url: '/xxx/display/displayReturn',
dataType: 'json',
//data is the server-Variables received from
success: function(data) {
var contents = data;
//The displayBox stores the data to be displayed on the screen.
var $displayBox = $('#displayBox')
//Finally, make an array to put the elements in the displayBox together
var addItemList = [];
//Rotate the data received by the extended for statement one by one
contents.forEach(function(elem) {
//Define p tag"{"I will put elements after that
var $displayItem = $('<p/>', {
//Define the text displayed in the p tag
text : elem.displayText,
//define id
id : elem.displaySeq + "d",
//Give class name
class : "displayContent"
})
//When attaching a child element to the generated p tag
$displayItem.append ($('<span/>', {
class : "children"
}))
//Store in an array
addItemList.push($helpItem)
});
//Stored together in variables to be passed to the screen
$displayBox.append(addItemList)
}
Here, we show the process to display the property of data (argument) acquired by communicating with the server side using ajax by inserting it in the dynamically generated p tag. The displayText is an image that contains the text to be displayed in html obtained from the database on the server side, and the displaySeq is an image that contains the serial number of the records obtained from the database, in order to give different ids to the generated tags. I will use it for you! Example id = "1d" d is an acronym for display (laughs)
You can also create a span tag etc. as a child element by using append under the p tag. I posted it for reference. If you add a Font Awesome class here, you can add icons etc. to each p tag!
displayAction.java
public List<JsonData> displayReturn() {
//Get the data you want to display from the DB
List<ContentEntity>contents =new ArrayList<ContentEntity>();
contents = displayService.getContents();
//Here, contents has a String type displayText as a property.(Contains multiple content type instances with p tag) and long type displaySeq
//List to pass as json
List<JsonData> jsonDataList = new ArrayList<>();
for (ContentEntity entity : contents) {
//Enter the value in the json conversion method
JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
//Put the generated json data in the list
jsonDataList.add(jsonData);
}
return jsonDataList;
}
Finally, java processing. Asynchronous communication of html → js in order (the part above success) → java processing → js DOM generation. The java part is not very important, so I put it at the end. action-> service-> dao-> database and processing continues, but here only the action part is posted. Also, there is a method for converting to jsondata as a private method, but I will omit it (laugh)
Creating a DOM element may seem difficult at first, but as soon as you create it, you will get an image, so please refer to it! Thank you for watching! !!