JQueryポップアップとJSON解析が機能しない

Question

jqueryで犬ネーミングツールを構築しました。すべての名前のjsonファイルをツールに追加することが求められました。何らかの理由でJSONファイルを使用するように変換したので、もう機能しません。ここではHTMLと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 --> 

ここでは、jQueryの部分は次のとおりです。dnt.jsonファイルから

<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> 

サンプルデータ：

[ 
     { 
     "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 
    }, 
    ] 

されています何か私は見落としている？どんな助けでも大歓迎です。

Answer 1

私はこのコードを実行すると、私はこのエラーヒット（いくつかの構文エラーをクリーンアップ後）：私はカンマを削除すると

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

これは、理由はここに

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

コンマのですがコードはまだ正確には機能しませんが、何か「名前を表示」をクリックするとします。参考のため

、私はそれが$アヤックスコールにこのコードを追加することでしたデバッグ方法：

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

これは、JSONが正しくフォーマットされていなかったためdoneセグメントは、実行していることはなかったことを私に示しました。