Javascript数组到html div标签.aspx

Question

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.

Answer 1

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>

Answer 2

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>