CODEWITHSUNDEEP
javascriptc#htmljqueryarrays
user14448916
user14448916

Reputation:

Javascript array to html div tag .aspx

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.

Upvotes: 1

Views: 53

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

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>

Upvotes: 2

akerr
akerr

Reputation: 375

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>

Upvotes: 1

Related Questions