I have an array in JS that I get from c# back end as...
<script>
var categoryLists = <%= this.javaSerial.Serialize(this.categoryList) %>;
</script>
And my HTML is
<div id="categories">
</div>
What is the best way that I can display the contents of the JS array in the div with id as categories?
PS- I am open to both JS, and Jquery. I also have a huge c# backend.
While essentially the same as @akerr's existing js answer, assuming that categoryList outputs as an array, here's a one-liner that will generate the same result.
var categories = ["category 1", "category 2", "category 3"];
$("#categories").append("<ul>" + categories.map((e, i) => "<li>" + e + "</li>").join("") + "</ul>")<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories">
</div>Not knowing what the data looks like, I would suggest something like this.
EDIT: Another option that may be a bit cleaner:
JS
let list = document.getElementById('category-list')
categoryLists.forEach(function (category) {
let li = document.createElement('li');
list.appendChild(li);
li.innerHTML += category;
});
JS
let list = document.getElementById('category-list')
for (var category in categoryLists) {
list.innerHTML += '<li>' + category + '</li>';
console.log(category);
}
HTML
<div id="categories">
<ul id="category-list">
</ul>
</div>
