Binding a json list to HTML dynamically

Question

I get a JSON array list of objects from database.

this is spitted to client side on page load of the current usercontrol

    var json = new JavaScriptSerializer();
    var jsonList = json.Serialize(mylList);             
    Page.ClientScript.RegisterStartupScript(this.GetType(), "HomeCarouselScript", string.Concat("<script type='text/javascript'> var carouselData = ", jsonList, ";</script>"));

the json structure is like this json has collection of objects called Active. each active object has property called Name, Lastname, Address

i want to display all the objects in to HTML div in this structure for each object present can we add following template to the main container. for each existing object in the j son list i am trying to add it the main div container.

<div id="maincontainer">
   <div class="item">
         Object.Name
         <div class="subcategory">
            <h4>
              Object.Age
            </h4>
            <p>               
             Object.Address
            </p>
          </div>
     </div>

Francis Nepomuceno · Accepted Answer · 2015-03-31 16:29:47Z

1

You can use an HTML template engine like Mustache or Handlebars and turn your markup into something like this:

{{#each item}}  
      <div class="item">
        {{Name}}
          <div class="subcategory">
            <h4>
              {{Age}}
            </h4>
            <p>               
              {{Address}}
            </p>
          </div>
      </div>
{{/each}}

answered Mar 31, 2015 at 16:29

Francis Nepomuceno

5,1154 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user388969 Over a year ago

is it supported in IE8 and other browsers... we tried angular which is not supported in IE8 and now we have to re do again

Francis Nepomuceno Over a year ago

According to docs, handlebars supports IE6+. Btw, angular 1.2 still supports IE8.

user388969 Over a year ago

angular really just 1.2 or 1.2.26 as well

Collectives™ on Stack Overflow

Binding a json list to HTML dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related