показывать данные по клику из многомерного массива

Question

Данные JSON загружены, но не все данные должны просматриваться, если не щелкнуть элемент, однако на данный момент все данные отображаются в данный момент.

При нажатии мне нужно загрузить этот разделданных.

var json_data = {"designCollections": [
    {
      "entity_id": "1",
      "name": "Cute Shark",
      "default_font_id": "83",
      "default_font_name": "Pinto01",
      "default_colour_id": "21671",
      "default_colour_code": "188",
      "img_src" : "img/thumbs/collections/cute-shark.svg",
      "colours": [
        {
          "entity_id": "21671",
          "code": "188",
          "name": "ocean",
          "img_src" : "img/thumbs/collections/design-colours/cute-shark.ocean.svg",
          "nameblocks_colour_json": null
        },
        {
          "entity_id": "21601",
          "code": "159",
          "name": "Beach Days",
          "img_src" : "img/thumbs/collections/design-colours/cute-shark.beachdays.svg",
          "nameblocks_colour_json": null
        }
      ],
      "fonts": [
        {
          "Pacifico" : "Pacifico"
        },
        {
          "Pinto01" : "Pinto 01"
        },
        {
          "FuturaMediumCAPS" : "Futura Medium Caps"
        }
      ],
      "options": [
        {
          "option_id": "11190",
          "design_id": "10150",
          "default_title": "First Name",
          "store_title": "First Name",
          "title": "First Name",
          "values": []
        },
        {
          "option_id": "11189",
          "design_id": "10150",
          "default_title": "Last Name",
          "store_title": "Last Name",
          "title": "Last Name",
          "values": []
        }
      ]
    }, etc ...
}]

Код Jquery

$.each(data_obj, function(key, value) {
  //console.log(key + ' : ' + value);

    if(key === "designCollections"){
      //console.log('-------- designCollections ----------');

      for (i = 0; i < data_obj.designCollections.length; i++) {
        console.log('::::::::::::::::::::::::::: ' + data_obj.designCollections[i].name + ' :::::::::::::::::::::::::::');

        if(i === 0){
          $('#sru-collections').append('<li><label><input type="radio" name="design-type" value="' + data_obj.designCollections[i].name + '" checked><img class="img-design" src="' + data_obj.designCollections[i].img_src + '" alt="' + data_obj.designCollections[i].name + '" title="' + data_obj.designCollections[i].name + '" width="50" height="50" /></label></li>');
        }else{
          $('#sru-collections').append('<li><label><input type="radio" name="design-type" value="' + data_obj.designCollections[i].name + '" ><img class="img-design" src="' + data_obj.designCollections[i].img_src + '" alt="' + data_obj.designCollections[i].name + '" title="' + data_obj.designCollections[i].name + '" width="50" height="50" /></label></li>');
        }

        //if collection is selected show its options
        var isChecked = $("input[name='design-type']").prop('checked');

        if(isChecked){
          $.each(data_obj.designCollections[i], function(key1, value1) {
            console.log(key1 + ' :: ' + value1);

            if(key1 === "colours"){
              console.log('-------- ' + data_obj.designCollections[i].colours.length + ' Colours ----------');

              for (j = 0; j < data_obj.designCollections[i].colours.length; j++) {
               console.log(data_obj.designCollections[i].colours[j].name);

                if(j === 0){
                  $('#sru-colours').append('<li><label><input type="radio" name="design-colour" value="' + data_obj.designCollections[i].colours[j].name + '" checked><img class="img-design" src="' + data_obj.designCollections[i].colours[j].img_src + '" alt="' + data_obj.designCollections[i].colours[j].name + '" title="' + data_obj.designCollections[i].colours[j].name + '" width="50" height="50" /></label></li>');
                }else{
                  $('#sru-colours').append('<li><label><input type="radio" name="design-colour" value="' + data_obj.designCollections[i].colours[j].name + '" ><img class="img-design" src="' + data_obj.designCollections[i].colours[j].img_src + '" alt="' + data_obj.designCollections[i].colours[j].name + '" title="' + data_obj.designCollections[i].colours[j].name + '" width="50" height="50" /></label></li>');
                }
                // $.each(data_obj.designCollections[i].colours[j], function(key2, value2) {
                //   console.log(key2 + ' ::: ' + value2);
                // });
              }          
            }

            if(key1 === "fonts"){
              console.log('-------- ' + data_obj.designCollections[i].fonts.length + ' Fonts ----------');

              for (f = 0; f < data_obj.designCollections[i].fonts.length; f++) {
               // console.log(data_obj.designCollections[i].fonts[f]);
                $.each(data_obj.designCollections[i].fonts[f], function(key2, value2) {
                  console.log(key2 + ' ::: ' + value2);
                });
              }          
            }

            if(key1 === "options"){
              console.log('-------- ' + data_obj.designCollections[i].options.length + ' Options ----------');

              for (k = 0; k < data_obj.designCollections[i].options.length; k++) {
               // console.log(data_obj.designCollections[i].options[k]);
                $.each(data_obj.designCollections[i].options[k], function(key2, value2) {
                  console.log(key2 + ' ::: ' + value2);
                });
              }          
            }

          });
        }else{
          console.log('none');
        }

      }          
    }
});

В результате я получу показ проверенных данных только тогда, когда выбран следующий элемент данных, замененный новымitem.

[JSFIDDLE DEMO] (https://jsfiddle.net/james182/ct2fmdo7/1/)