jQuery + JSON - clearing data before appending

I'm having an issue trying to clear my data before appending a new set based on matching data attributes. It goes like this:

Click Button > If button's data attribute matches a JSON field, populate the menu with those items

It's working so far, but I'm using the append function and it just keeps adding on - the HTML option doesn't seem to work, and I've tried clearing the div's contents using .HTML('') before the append function and it didn't work. I am pretty stupid though, so it might work if someone who knows what they're doing tries the same route.

This is the JSON file: https://api.myjson.com/bins/non2t.json

And here's the code:

$.getJSON("https://api.myjson.com/bins/non2t.json", function(data) {
    console.log(data);
  $.each(data,function(i,data){
    $('.main-btn').on("click", function () {
      var scale = $(this).data('scale')
    if (scale == data.root) {
$('#total-scale-men').append('<button>' + data.scale + '</button>');    }
    })
            });
});

$('.scales-men').show();
.scales-men {z-index:1000; position:absolute; top:12%; left:1px; height:calc(88% - 2px); width:calc(100% - 2px); border-radius:20px; background:rgba(255,255,255,.8); overflow:scroll; text-align:center; display:none;}
.scales-men div {padding:5px 0;}
/* 
https://api.myjson.com/bins/non2t.json
*/

#gcWindow {width:100%;height:382px;margin:0;padding:0;}

#gcWrap {position:absolute;left:calc(50% - (781px / 2));font-family:Lato;font-size:20px;}
#gcFretboard {border:1px #666 solid; border-radius:20px; width:781px; height:380px; margin-left:auto;margin-right:auto; background-image:url('https://www.electricherald.com/chordindex/img/bg.jpg'); background-position:0px 66px;background-size:contain;background-repeat:no-repeat;}

#gcFretboard > div.gcSubMen > ul >li {margin:0;padding:0;}

button {display:inline-block; z-index:1000; margin:6px 0px 2px 4px; height:23px; line-height:16px; background:#fff; border:1px #666 solid; border-radius:4px; outline:none; cursor:pointer; box-shadow:1px 1px 1px #ccc; font-weight:bold;color:#666;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
button:hover {color:#c44c4c;border:1px #c44c4c solid;box-shadow:1px 1px 1px #888;}
button:active {box-shadow:1px 1px 1px #888 inset;}
button sup, button sub {font-size:70%;}
#gcFretboard > div.gcSubMen > ul > li > button {font-weight:normal;}
#gcFretboard > div.gcMen > ul > li > button {width:48px;}

.gcMen {z-index:500; width:100%; position:absolute; text-align:center; top:4px;}
.gcSubMen {z-index:500; position:absolute; background:rgba(255,255,255,.9); width:779px; border-radius:20px; top:35px;}
.chords-menu {margin:0;padding:0;}
.chords-subgroups {margin:4px 0 0 0;padding:0;border-top:1px #fafafa dashed;}

.chords-menu li {
    display: inline-block;
  }
.chords-subgroups li {
    display: inline-block;
  }

#inf {width:781px; position:absolute; bottom:0px;}
#gcInfTit {position:absolute; width:781px; height:10px; bottom:34px;}
#gcInfTit div {float:left;text-align:left;font-size:10px;line-height:10px;padding-left:10px;margin:0;color:#ccc;}
#tit1 {width:calc(33% - 10px);} 
#tit2 {width:calc(33% - 10px);} 
#tit3 {width:calc(33% - 10px);}
.gcNAI {float:left; height:30px; color:#c44c4c;text-align:center;font-size:14px;font-weight:bold;}


.gcbg {background-size:contain; background-repeat:no-repeat;}
.gc-string {position:absolute; width:781px; height:16px;}
#gc-string-E {top:189px;
-moz-transform: rotate(.6deg);
-webkit-transform: rotate(.6deg);
-o-transform: rotate(.6deg);
-ms-transform: rotate(.6deg);
transform: rotate(.6deg);
}
#gc-string-A {top:171px;
-moz-transform: rotate(.28deg);
-webkit-transform: rotate(.28deg);
-o-transform: rotate(.28deg);
-ms-transform: rotate(.28deg);
  transform: rotate(.28deg);}
#gc-string-D {top:153px;
-moz-transform: rotate(-.02deg);
-webkit-transform: rotate(-.02deg);
-o-transform: rotate(-.02deg);
-ms-transform: rotate(-.02deg);
  transform: rotate(-.02deg);}
#gc-string-G {top:136px;
-moz-transform: rotate(-.25deg);
-webkit-transform: rotate(-.25deg);
-o-transform: rotate(-.25deg);
-ms-transform: rotate(-.25deg);
  transform: rotate(-.25deg);}
#gc-string-B {top:119px;
-moz-transform: rotate(-.55deg);
-webkit-transform: rotate(-.55deg);
-o-transform: rotate(-.55deg);
-ms-transform: rotate(-.55deg);
  transform: rotate(-.55deg);}
#gc-string-E2 {top:101px;
-moz-transform: rotate(-.95deg);
-webkit-transform: rotate(-.95deg);
-o-transform: rotate(-.95deg);
-ms-transform: rotate(-.95deg);
  transform: rotate(-.95deg);}

.fret-0 {left:0;}
.fret-1 {left:42px;}
.fret-2 {left:119px;}
.fret-3 {left:190px;}
.fret-4 {left:257px;}
.fret-5 {left:321px;}
.fret-6 {left:378px;}
.fret-7 {left:434px;}
.fret-8 {left:486px;}
.fret-9 {left:536px;}
.fret-10 {left:582px;}
.fret-11 {left:627px;}
.fret-12 {left:669px;}
.fret-13 {left:710px;}
.fret-14 {left:747px;}

.X {background-image:url('https://www.electricherald.com/chordindex/img/X.png');}
.A {background-image:url('https://www.electricherald.com/chordindex/img/A.png');}
.As {background-image:url('https://www.electricherald.com/chordindex/img/As.png');}
.B {background-image:url('https://www.electricherald.com/chordindex/img/B.png');}
.C {background-image:url('https://www.electricherald.com/chordindex/img/C.png');}
.Cs {background-image:url('https://www.electricherald.com/chordindex/img/Cs.png');}
.D {background-image:url('https://www.electricherald.com/chordindex/img/D.png');}
.Ds {background-image:url('https://www.electricherald.com/chordindex/img/Ds.png');}
.E {background-image:url('https://www.electricherald.com/chordindex/img/E.png');}
.F {background-image:url('https://www.electricherald.com/chordindex/img/F.png');}
.Fs {background-image:url('https://www.electricherald.com/chordindex/img/Fs.png');}
.G {background-image:url('https://www.electricherald.com/chordindex/img/G.png');}
.Gs {background-image:url('https://www.electricherald.com/chordindex/img/Gs.png');}

.nt {position:absolute; height:16px; width:16px; z-index:1000; background-size:contain;background-repeat:no-repeat;}
.inv {opacity:1;}
.gcop {opacity:1;}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#gc-cw {font-family:lato; position:absolute; top:0; left:20px; font-size:10px;}
#gc-cw a {text-decoration:none; color:#000; display:block; margin-top:8px; width:100%;text-align:center;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
#gc-cw a:hover {outline:10px #fff solid;color:#c44c4c;}
#gc-cw a:active {outline:1px #f00 solid;}
#gc-cw a span {font-weight:bold;font-size:11px;line-height:11px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gcWindow">
<div id="gcWrap">
  <div id="men-A" class="scales-men"><div></div></div>
  <div id="total-scale-men" class="scales-men"></div>
  <div id="gcFretboard">
  <div class="gcMen">
  <ul class="chords-menu">
  <li><button data-scale="A" class="main-btn">A</button></li>
  <li><button data-scale="A#/Bb" class="main-btn">A#</button></li>
  <li><button data-scale="B" class="main-btn">B</button></li>
  <li><button data-scale="C" class="main-btn">C</button></li>
  <li><button data-scale="C#/Db" class="main-btn">C#</button></li>
  <li><button data-scale="D" class="main-btn">D</button></li>
  <li><button data-scale="D#/Eb" class="main-btn">D#</button></li>
  <li><button data-scale="E" class="main-btn">E</button></li>
  <li><button data-scale="F" class="main-btn">F</button></li>
  <li><button data-scale="F#/Gb" class="main-btn">F#</button></li>
  <li><button data-scale="G" class="main-btn">G</button></li>
  <li><button data-scale="G#/Ab" class="main-btn">G#</button></li>
</ul></div>
<div class="gcSubMen">
  <ul class="chords-subgroups">
</ul>
    </div>

    <div id="gc-string-E" class="gc-string">
      <div class="nt inv fret-0 E"></div>
      <div class="nt inv fret-1 F"></div>
      <div class="nt inv fret-2 Fs"></div>
      <div class="nt inv fret-3 G"></div>
      <div class="nt inv fret-4 Gs"></div>
      <div class="nt inv fret-5 A"></div>
      <div class="nt inv fret-6 As"></div>
      <div class="nt inv fret-7 B"></div>
      <div class="nt inv fret-8 C"></div>
      <div class="nt inv fret-9 Cs"></div>
      <div class="nt inv fret-10 D"></div>
      <div class="nt inv fret-11 Ds"></div>
      <div class="nt inv fret-12 E"></div>
      <div class="nt inv fret-13 F"></div>
      <div class="nt inv fret-14 Fs"></div>
    </div>
    <div id="gc-string-A" class="gc-string">
      <div class="nt inv fret-0 A"></div>
      <div class="nt inv fret-1 As"></div>
      <div class="nt inv fret-2 B"></div>
      <div class="nt inv fret-3 C"></div>
      <div class="nt inv fret-4 Cs"></div>
      <div class="nt inv fret-5 D"></div>
      <div class="nt inv fret-6 Ds"></div>
      <div class="nt inv fret-7 E"></div>
      <div class="nt inv fret-8 F"></div>
      <div class="nt inv fret-9 Fs"></div>
      <div class="nt inv fret-10 G"></div>
      <div class="nt inv fret-11 Gs"></div>
      <div class="nt inv fret-12 A"></div>
      <div class="nt inv fret-13 As"></div>
      <div class="nt inv fret-14 B"></div>
    </div>
    <div id="gc-string-D" class="gc-string">
      <div class="nt inv fret-0 D"></div>
      <div class="nt inv fret-1 Ds"></div>
      <div class="nt inv fret-2 E"></div>
      <div class="nt inv fret-3 F"></div>
      <div class="nt inv fret-4 Fs"></div>
      <div class="nt inv fret-5 G"></div>
      <div class="nt inv fret-6 Gs"></div>
      <div class="nt inv fret-7 A"></div>
      <div class="nt inv fret-8 As"></div>
      <div class="nt inv fret-9 B"></div>
      <div class="nt inv fret-10 C"></div>
      <div class="nt inv fret-11 Cs"></div>
      <div class="nt inv fret-12 D"></div>
      <div class="nt inv fret-13 Ds"></div>
      <div class="nt inv fret-14 E"></div>
    </div>
    <div id="gc-string-G" class="gc-string">
      <div class="nt inv fret-0 G"></div>
      <div class="nt inv fret-1 Gs"></div>
      <div class="nt inv fret-2 A"></div>
      <div class="nt inv fret-3 As"></div>
      <div class="nt inv fret-4 B"></div>
      <div class="nt inv fret-5 C"></div>
      <div class="nt inv fret-6 Cs"></div>
      <div class="nt inv fret-7 D"></div>
      <div class="nt inv fret-8 Ds"></div>
      <div class="nt inv fret-9 E"></div>
      <div class="nt inv fret-10 F"></div>
      <div class="nt inv fret-11 Fs"></div>
      <div class="nt inv fret-12 G"></div>
      <div class="nt inv fret-13 Gs"></div>
      <div class="nt inv fret-14 A"></div>
    </div>
    <div id="gc-string-B" class="gc-string">
      <div class="nt inv fret-0 B"></div>
      <div class="nt inv fret-1 C"></div>
      <div class="nt inv fret-2 Cs"></div>
      <div class="nt inv fret-3 D"></div>
      <div class="nt inv fret-4 Ds"></div>
      <div class="nt inv fret-5 E"></div>
      <div class="nt inv fret-6 F"></div>
      <div class="nt inv fret-7 Fs"></div>
      <div class="nt inv fret-8 G"></div>
      <div class="nt inv fret-9 Gs"></div>
      <div class="nt inv fret-10 A"></div>
      <div class="nt inv fret-11 As"></div>
      <div class="nt inv fret-12 B"></div>
      <div class="nt inv fret-13 C"></div>
      <div class="nt inv fret-14 Cs"></div>
    </div>
    <div id="gc-string-E2" class="gc-string">
      <div class="nt inv fret-0 E"></div>
      <div class="nt inv fret-1 F"></div>
      <div class="nt inv fret-2 Fs"></div>
      <div class="nt inv fret-3 G"></div>
      <div class="nt inv fret-4 Gs"></div>
      <div class="nt inv fret-5 A"></div>
      <div class="nt inv fret-6 As"></div>
      <div class="nt inv fret-7 B"></div>
      <div class="nt inv fret-8 C"></div>
      <div class="nt inv fret-9 Cs"></div>
      <div class="nt inv fret-10 D"></div>
      <div class="nt inv fret-11 Ds"></div>
      <div class="nt inv fret-12 E"></div>
      <div class="nt inv fret-13 F"></div>
      <div class="nt inv fret-14 Fs"></div>
</div>
    
<div class="chord">
  <div id='gcInfTit'><div id="tit1">ROOT</div><div id="tit2">SCALE</div><div id="tit3">STRUCTURE</div></div>
  <div id="inf"></div>
</div>
  </div>
  
</div> <!---gcWrap--->
</div> <!---gcWindow--->

Sorry about all the formatting, it may be easier to see in codepen: http://codepen.io/JTBennett/pen/NdLWJy

Anyway, the eventual idea is to get the scales to show based on info in the JSON file that will hide/show the correct sets of notes.

Any help would be greatly appreciated!

Answers 1

Related Articles