Print JSON data in HTML structure issue

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 1

Use jQuery template to bind the Html. Some Sample

Answer 2

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);
}

Answer 3

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.

Hope this helps.

Answer 4

Here is a bit that will get you two new objects, one for the first object property/value and another for the remaining. Still not clear what is done with it once you have it, but let me know if it helps:

// This can be replaced with existing data or updated to var langs = data;
var langs = {"English": "en", "Francais": "fr","German": "gm" };


// jQuery map only works on objects after 1.6, heads up 
var lang_keys = $.map( langs, function( value, key ) {
  return key;
});

// Now that you have an array of the keys, you can use plain-ol shift()    

var primary_lang_key = lang_keys.shift();

// create and populate an object just for your first language:
var primary_lang = {};
primary_lang[primary_lang_key] = langs[primary_lang_key];

// Thanks to shift, we know that populating this object with lang_keys will
// only have remaining items:
var other_langs = {};
$.map( lang_keys, function( lang_key ) {
  other_langs[lang_key]  = langs[lang_key];
});

console.log(other_langs);