6
\$\begingroup\$

I'm new to jQuery/JSON and I've build an dynamic toggle system. It work fine, but I'm not sure about my code and I want a better way of building this.

Could you please see my code and give comments/solutions/explanations for a better structure for this system?

NOTE: All JSON files are the same build

$(document).ready(function() {

    $(".color-list.one li:nth-child(2)").on('click', function() {
        $.getJSON("json/a2.json", function(data) {
            //Handle my response
            $('ul.elements-list').html(
                '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
                '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

            $('ul.elements-list').append(
                '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

        });
    });

    $(".color-list.one li:nth-child(3)").on('click', function() {
        $.getJSON("json/a3.json", function(data) {
            //Handle my response
            $('ul.elements-list').html(
                '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
                '<li><a href=' + data.BBurlElement + '>' + data.BBnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

        });
    });

    $(".color-list.one li:nth-child(4)").on('click', function() {
        $.getJSON("json/a4.json", function(data) {
            //Handle my response
            $('ul.elements-list').html(
                '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
                '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
                '<li><a href=' + data.ACurlElement + '>' + data.ACnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

            $('ul.elements-list').append(
                '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

        });
    });

    $(".color-list.one li:nth-child(5)").on('click', function() {
        $.getJSON("json/a5.json", function(data) {
            //Handle my response
            $('ul.elements-list').html(
                '<li class="elements-item"><span class="tog">' + data.Atitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.AAurlElement + '>' + data.AAnameElement + '</a></li>'+
                '<li><a href=' + data.ABurlElement + '>' + data.ABnameElement + '</a></li>'+
                '<li><a href=' + data.ACurlElement + '>' + data.ACnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

            $('ul.elements-list').append(
                '<li class="elements-item"><span class="tog">' + data.Btitle + '</span>'+
                '<div class="togcont hidden">'+
                '<ul class="elements-link">'+
                '<li><a href=' + data.BAurlElement + '>' + data.BAnameElement + '</a></li>'+
                '</ul>'+
                '</div></li>');

        });
    });


    $('ul.elements-list').on("click", ".tog", function(){
            var obj = $(this).next();
                if(obj.hasClass("hidden")){
                    obj.removeClass("hidden").slideDown();
                    $(this).addClass("bounce");
                } else {
                    obj.addClass("hidden").slideUp();
                    $(this).removeClass("bounce");
                }
        });
});

The structure of my json files :

{
"Atitle": "Master Title A",
"AAnameElement": "name 1",
"ABnameElement": "name 2",
"ACnameElement": "name 3",
"AAurlElement" : "url1.html",
"ABurlElement" : "url2.html",
"ACurlElement" : "url3.html",
"Btitle": "Master Title B",
"BAurlElement" : "urlB1.html",
"BAnameElement": "name B1"
}
\$\endgroup\$
4
\$\begingroup\$

You are definitely repeating a ton of code, as far as I can tell the following is true

  • You always set the html $('ul.elements-list') to show either an .A or .B list
  • The amount of elements varies, but it seems to be never more than 3
  • Optionally if the .A is shown, you might also show a .B list
  • The .A list always comes before the .B list

From there you could build a function that takes the amount of A and B list entries to display

function buildTable(data, config) {
  var title = data[config.prefix + 'title'],
      output = '<li class="elements-item">' +
                 '<span class="tog">' + title + '</span>' +
                 '<div class="togcont hidden">' +
                   '<ul class="elements-link">',
      i, rowId,url,name;

  for( i = 0 ; i < config.rows ; i++)
  {
    //ASCII, 65 -> A, 66 -> B etc.
    rowId = config.prefix + String.fromCharCode( 65+i );
    url = data[rowId + 'urlElement'];
    name = data[rowId + 'nameElement'];
    output += ' < li > < a href = ' + url + ' > ' + name + ' < /a></li > '
  }

  output += ' < /ul></div > < /li>';
  return output
}

function buildTables( data , config )
{
  var html = ""
  for( var i = 0; i < config.length ; i++ ){
    html += buildTable( data , config[i] );
  }
   $('ul.elements-list').html( html );
}

From there you can simply change your listeners to

$.getJSON("json/a2.json", function(data) {
    buildTables( data , [ { prefix : "A" , rows : 2 } , { prefix : "B" , rows : 1 } ] );
});

$.getJSON("json/a3.json", function(data) {
    buildTables( data , [ { prefix : "B" , rows : 2 } ] );
});

$.getJSON("json/a4.json", function(data) {
    buildTables( data , [ { prefix : "A" , rows : 3 } , { prefix : "B" , rows : 1 } ] );
});

etc. etc.

I did not test the code, however it should give you an insight how to build this yourself.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Waouhh, thanks but i'm newbies and i'm not sure to understand the synthax and the close tag! I've test your code and i can't do work it! \$\endgroup\$ – GilbertOOl Jan 22 '14 at 19:37
  • \$\begingroup\$ I've edited my code with add the structure of my json files! \$\endgroup\$ – GilbertOOl Jan 22 '14 at 19:48
  • 1
    \$\begingroup\$ Thanks, I cleaned up my code so that at least there are no more syntax errors. Still, this might be too big a jump for you :\ Is there any part that needs to be explained better/extra ? \$\endgroup\$ – konijn Jan 22 '14 at 19:51
  • \$\begingroup\$ Thanks, I've a hard time with endings (parenthesis, brackets, semi-colons ... etc). so, where i must put the $(document)ready (function () { and my toggle system function please? \$\endgroup\$ – GilbertOOl Jan 22 '14 at 20:01
  • \$\begingroup\$ Hi, Thanks for the great help @konijn but i tried to use your code but I don't organize! I can't put well my "toggle" function and all others code neccessary! \$\endgroup\$ – GilbertOOl Jan 23 '14 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.