HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Dynamic toggle system

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewjavascriptstackoverflowbeginnerjqueryjson
systemtoggledynamic

Problem

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(
'' + data.Atitle + ''+
''+
''+
'' + data.AAnameElement + ''+
'' + data.ABnameElement + ''+
''+
'');

$('ul.elements-list').append(
'' + data.Btitle + ''+
''+
''+
'' + data.BAnameElement + ''+
''+
'');

});
});

$(".color-list.one li:nth-child(3)").on('click', function() {
$.getJSON("json/a3.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'' + data.Btitle + ''+
''+
''+
'' + data.BAnameElement + ''+
'' + data.BBnameElement + ''+
''+
'');

});
});

$(".color-list.one li:nth-child(4)").on('click', function() {
$.getJSON("json/a4.json", function(data) {
//Handle my response
$('ul.elements-list').html(
'' + data.Atitle + ''+
''+
''+
'' + data.AAnameElement + ''+
'' + data.ABnameElement + ''+
'' + data.ACnameElement + ''+
''+
'');

$('ul.elements-list').append(
'' + data.Btitle + ''+
''+
''+
'' + data.BAnameE

Solution

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 = '' +
                 '' + title + '' +
                 '' +
                   '',
      i, rowId,url,name;

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

  output += '  ';
  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.

Code Snippets

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 );
}
$.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 } ] );
});

Context

StackExchange Code Review Q#39796, answer score: 4

Revisions (0)

No revisions yet.