Question: I have a JSON witch looks something like this 

```
{
      "English": "en",
      "Francais": "fr",
      "German": "gm"
  }

```

Now I need to print this data in HTML structure witch looks like this 

```
<ul id="links">
            <li class="home">
                <a href="#"></a>
            </li>
            <li class="languages">
                <a href="#">EN</a>   ------ > FIRST LANGUAGE FROM JSON
                <ul class="available">  ----> OTHERS
                    <li><a href="#">DE</a></li>
                    <li><a href="#">IT</a></li>
                    <li><a href="#">FR</a></li>
                </ul>
            </li>
        </ul>

```

In javascript I know how to get data and print all data in the same structure but how to do it in structure shown in example ?

in Javascript I'm getting data with 

```
$.getJSON('js/languages.json', function(data) {
    console.log(data);
  /* $.each(data, function(key, val) {
    console.log(val);
  });*/
});

```

Answer: 
Use [jQuery template](http://plugins.jquery.com/loadTemplate/) to bind the Html. [Some Sample](http://weblogs.asp.net/hajan/archive/2010/12/14/jquery-templates-supported-tags.aspx)
Something like that:

```
var getBlock = function(skipLang) {
    var str = '\
        <ul id="links">\
            <li class="home">\
                <a href="#"></a>\
            </li>\
            <li class="languages">\
                <a href="#">' + data[skipLang] + '</a>\
                <ul class="available">\
    ';
    for(var lang in data) {
        if(lang != skipLang) {
            str += '<li><a href="#">' + lang + '</a></li>';
        }
    }
    str += '</ul></li></ul>';
    return str;
}

var html = '';
for(var lang in data) {
   html += getBlock(lang);
}

```