Introduction

The jsRepeater fills HTML elements and attributes with JSON content.

Consider this simple JSON object, it has three properties i.e. Name, Type and URL.

  {"Name" : "Google", "Type" : "Search Engine", "URL" : "www.google.com"}

In order to put those into HTML we would first need to create a template and somehow specify where in the template the three properties go. To do that we use ${Name}, ${Type} and ${URL}

  <div id='template1'
    >${Name} is a ${Type} found at <a href='${URL}'>${URL}</a><br /></div>

Having created the template we can now fill it with our JSON object

This gives us

We can use exactly the same template to bind to an array of objects

var ary = [{"Name" : "Google", "Type" : "Search Engine", "URL" : "www.google.com"},
           {"Name" : "Blogspot", "Type" : "Blog Application", "URL" : "blogspot.com"},
           {"Name" : "CNN", "Type" : "News Portal", "URL" : "cnn.com"}]
           
   $('#template1').fillTemplate(ary); 

Gives us