I am using ajax to fetch a list of user data. But after this ajax call, I need to display the data in an HTML structure like a datasheet for each user. My question is how can I store the HTML code in a functional and elegant way to maintain readability and easily insert the user's data.
Is creating a separate file with the component template and including it through javascript the best approach? If so, how can I achieve this? If not, what would be the best alternative?
What I currently have:
Ajax call:
$("#list-users").click(function(ev){
ev.preventDefault();
$.ajax({
url : '/ajax/Users.php',
type : 'POST',
dataType: 'json',
data : data,
success : function(users){
users.forEach((user, index) => {
//The issue lies here. I am searching for a method to
//store the HTML component code without needing to embed
//the code inside a variable.
var complexHtml = '...<p>' + user.name + '</p>...';
$('.list').append(complexHtml);
})
}
})
})