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)
Although using templating engine is an option for simpler code, for this case you can directly run a for loop and assign HTML within javascript code easily.

HTML part is going to be something like this

```
<ul id="links">
    <li class="home">
        <a href="#">home</a>
    </li>
    <li class="languages">
        <ul class="available">
        </ul>
    </li>
</ul>

```

And JS part is like this:

```
var data = {
      "English": "en",
      "Francais": "fr",
      "German": "gm"
  };

var $liLanguages = $('li.languages');
var $ulAvailable = $('ul.available');

var selectedLanguage = '';

for(var index in data) {
    if(selectedLanguage == '') {
        selectedLanguage = data[index];
        $liLanguages.prepend("<a href='#'>" + data[index].toUpperCase() + "</a>");
    }
    else {
        $ulAvailable.append("<li><a href='#'>" + data[index].toUpperCase() + "</a></li>");
    }
}

```

Here is [the jsfiddle related](http://jsfiddle.net/3D4A8/1/).

Hope this helps.