JQuery Popup und JSON Parsing funktioniert nicht

Question

Ich habe ein Hund Namenswerkzeug durch jquery gebaut. Es wurde angefordert, dass eine json-Datei mit allen Namen zum Tool hinzugefügt wird. Aus irgendeinem Grund, den ich jetzt konvertiert habe, um die JSON-Datei zu verwenden, funktioniert es nicht mehr. Hier ist der Code für HTML und jquery:

<div class="dnt-container-mobile seasonal-bg-dark"> 
<h1 class="mobile-heading">Dog Name Finder</h1> 
<h1 class="wide-heading"><!-- <span class="logo teal icon-akc-logo dnt-logo"></span> -->Dog Name Finder</h1> 
<form class="dnt-tool" id="dnt" name="dnt"> 
    <div class="dnt-overlay"> 
     <input id="male" name="gender" type="radio" value="Male" /> 
      <label for="male">Male</label> 
     <input data-id="594" id="female" name="gender" type="radio" value="Female" /> 
      <label for="female">Female</label> 
     <input checked="checked" data-id="0" id="all" name="gender" type="radio" value="All" /> 
      <label for="all">All</label> 
     <select> 
      <option data-id="0" value="/dog-name-finder/">Select a Category</option> 
      <option data-id="0" value="/dog-name-finder/">All</option> 
      <option value="/dog-name-finder/baby/">Baby</option> 
      <option data-id="602" value="/dog-name-finder/celebrity/">Celebrity</option> 
      <option data-id="603" value="/dog-name-finder/cute/">Cute</option> 
      <option data-id="598" value="/dog-name-finder/disney/">Disney</option> 
      <option data-id="600" value="/dog-name-finder/fancy/">Fancy</option> 
      <option data-id="605" value="/dog-name-finder/most-popular/">Most Popular</option> 
      <option data-id="599" value="/dog-name-finder/presidential/">Presidential</option> 
      <option data-id="597" value="/dog-name-finder/techy/">Techy</option> 
      <option data-id="596" value="/dog-name-finder/television/">Television</option> 
      <option data-id="606" value="/dog-name-finder/trendy/">Trendy</option> 
      <option data-id="595" value="/dog-name-finder/unisex/">Unisex</option> 
      <option data-id="604" value="/dog-name-finder/video-game/">Video Game</option> 
     </select> 
    </div><!-- end of dnt-overlay --> 
    <div class="dnt-btn"> 
     <button id="submit" type="submit">Show Names</button> 
    </div><!-- end of dnt btn --> 
    </form><!-- end of dnt-tool --> 
    </div><!-- end of dnt-container-mobile --> 

    <div class="white-popup mfp-hide" id="dnt-popup"> 
    <div class="popup-logo"> 
    <a class="logo teal icon-logo"></a> 
</div><!-- end of logo --> 
<h1>Most Popular Dog Names</h1> 
<img src="gender-all.png" id="dnt-all-img" alt= 
all puppies"> 
<img src="female-puppy.png" id="dnt-female-img" alt="Female puppy"> 
<img src="male-puppy.png" id="dnt-male-img" alt="Male puppy"> 
<div class="results-list"> 
    <ul> 
    </ul> 
</div><!-- end of results list --> 
<div class="more-btn"> 
    <div class="short-btn"><a href="/dog-name/">Tap to See More Names</a></div> 
    <div class="long-btn"><a href="/dog-name/">Get More Names on Dog Name Finder</a></div> 
</div><!-- end of dnt btn --> 

Hier ist der JQuery Teil:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#dnt').submit(function(e){ 
       var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0; 
      var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All'; 
      if (cat_id === 0) 
      { 
       cat_title = 'All'; 
      } 
      var dnt_url = $('.dnt-overlay > select > option:selected').val(); 
      var gender = $('.dnt-overlay > [name=gender]:checked').data('id') || 0; 
      var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All'; 
      var title = cat_title; 
      var html = ''; 

      var params = ''; 

      if(window.innerWidth <= 320) 
      { 
      params = '?limit=18'; 
      } 
      else 
      { 
      params = '?limit=21'; 
      } 


     if (cat_id > 0) 
     { 
     params += '&' + 'cat_id=' + cat_id; 
     } 

     if (gender > 0 && cat_title != 'Gender Agnostic' && cat_title != 'Unisex' && cat_title != 'Male' && cat_title != 'Female') 
    { 
     title += ' ' + gender_title; 
     //params += '&' + 'gender=' + gender; 
     if(cat_title == 'All') 
     { 
      dnt_url += gender_title.toLowerCase() + '/'; 
     } 
     else 
     { 
      dnt_url += '?gender=' + gender_title.charAt(0).toLowerCase(); 
     } 
    } 

    title += ' Dog Names'; 

    $('#dnt-popup > h1').text(title); 
    $('#dnt-popup > .more-btn').find('a').attr('href',dnt_url); 



    e.preventDefault(); // We don't need to send the form, because it's all local 
    if($('#male').is(':checked')) { // Check if male is checked 
     $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-female').addClass('dnt-male'); 
    } else if($('#female').is(':checked')) { // Check if female is checked 
     $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-male').addClass('dnt-female'); 
    } else if($('#all').is(':checked')) { // Check if all is checked 
     $('#dnt-popup').removeClass('dnt-female').removeClass('dnt-male').addClass('dnt-all'); 
    } 
    $.ajax({ 
     dataType: "json", 
     url: "dnt.json" 
    }) 
     .done(function(data) { 

     $.each(data, function(index, value) { 
      html +='<li>' + value.title + '</li>'; 
     }); 

     $('#dnt-popup > .results-list > ul').html(html); 

     $.magnificPopup.open({ // open pop up for male 
       items: { 
       src: '#dnt-popup', 
       type: 'inline' 

       },//item 
       mainClass: 'animated slideInRight' 
     });///popup open 


     }); 

});///submit function 


$('#dnt-popup > .more-btn > .long-btn > a, #dnt-popup > .more-btn > .short-btn > a').on("click",function(){ 

    var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0; 
    var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All'; 
    if (cat_id === 0) 
    { 
     cat_title = 'All'; 
    } 

    var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All'; 

    }); //event for click to DNT landing page 


    });///submit function 
    });//JQuery 
</script> 

Beispieldaten aus der dnt.json Datei:

[ 
     { 
     "Name": "Aaliyah", 
     "Female": 594, 
     "Baby": 601 
     }, 
    { 
     "Name": "Abby", 
     "Female": 594 
    }, 
    { 
     "Name": "Abe", 
     "Male": 593, 
     "Video Games": 604 
    }, 
    { 
     "Name": "Abigail", 
     "Female": 594, 
     "Baby": 601 
    }, 
    { 
     "Name": "Abu", 
     "Male": 593, 
     "Disney": 598 
    }, 
    { 
     "Name": "Ace", 
     "Male": 593, 
     "Fancy": 600, 
     "Cool": 611 
    }, 
    { 
     "Name": "Ace", 
     "Male": 593, 
     "Fancy": 600, 
     "Cool": 611 
    }, 
    { 
     "Name": "Action", 
     "Male": 593, 
     "Female": 594, 
     "Agnostic": 595 
    }, 
    { 
     "Name": "Ada", 
     "Female": 594, 
     "German": 610 
    }, 
    { 
     "Name": "Adalyn", 
     "Female": 594, 
     "Baby": 601 
    }, 
    ] 

Ist da etwas, das ich übersehe? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Wenn ich diesen Code ausführen (nachdem ich einige Syntaxfehler Reinigung) ich diesen Fehler betroffen:

SyntaxError: JSON.parse: unexpected character at line 54 column 3 of the JSON data

Dies ist wegen des Kommas hier

{ 
     "Name": "Adalyn", 
     "Female": 594, 
     "Baby": 601 
    }, // <-- this comma 
    ] 

Als ich das Komma entfernen, die Code funktioniert immer noch nicht genau, aber es tut etwas, wenn ich auf "Namen anzeigen" klicken.

als Referenz, so wie ich gedebuggt war es diesen Code in das $ .ajax Anruf hinzuzufügen:

.fail(function(a,b,c) { 
    console.log(a); 
    console.log(b); 
    console.log(c); 
}) 

Dies hat mir gezeigt, dass das done Segment nie ausgeführt wurde, weil die json nicht korrekt formatiert wurde.