Загрузка Json Data в таблицу с jquery

Question

После подробного поиска и просмотра всех похожих вопросов на этом форуме, я нахожусь на en pass, я не могу получить свой сценарий для загрузки информации с Json. Я создал в таблицу, которую я пытаюсь создать, я даже следовал за jQuery API почти до буквы. Любая помощь будет оценена по достоинству. Я не уверен, что именно писать, но если требуется больше информации, я более чем счастлив опубликовать ее.

Это данные JSON:

{ 

    "Class1": { 
     "Date": 12/25/2016, 
     "Lesson": "Lesson 44", 
     "Title": "things to do", 
     "Pages": 194-97 
    }, 

"Class2": { 
     "Date": 12/25/2016, 
     "Lesson": "Open Topic", 
     "Title": "TBD" 


    }, 

Это Jquery, я даже оставил комментируемой от Аякса я попытался попробовать:

$(function(){ 

// $.ajax({ 
// 
// url : "scripts/classes.json", 
// dataType : "jsonp", 
// success : function(data) { 


    $.getJSON("scripts/classes.json", function(data) { 
    console.log(data); 
     var items = []; 
    $.each(data.class1, function(key, val){ 
      items.push("<tr>"); 
      items.push("<td id='" + key + "'>" + val.Date + "</td>"); 
      items.push("<td id='" + key + "'>" + val.Lesson + "</td>"); 
      items.push("<td id='" + key + "'>" + val.Title + "</td>"); 
      items.push("<td id='" + key + "'>" + val.Pages + "</td>"); 
      items.push("<\tr>"); 

    }); 

    $("<tbody/>" , {html: items.join("")}).appendTo("#sunday-school"); 

    }); 

Наконец HMTL блок он пойдет:

<section class="classes"> 
     <h2>Class1</h2> 
     <table id="sunday-school"> 
      <thead> 
      <tr> 
      <th>Date</th> 
      <th>Lesson</th> 
      <th>Title</th> 
      <th>Pages</th> 
      </tr> 
      </thead> 

     </table> 
    </section> 

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

Answer 1

$data ={ 
 
    "Class1": { 
 
     "Date": "12/25/2016", 
 
     "Lesson": "Lesson 44", 
 
     "Title": "things to do", 
 
     "Pages": "194-97" 
 
    }, 
 

 
    "Class2": { 
 
     "Date": "12/25/2016", 
 
     "Lesson": "Open Topic", 
 
     "Title": "TBD", 
 
    "Pages": "194-97" 
 
    } 
 
}; 
 

 
$.each($data,function(key,$datum){ 
 
    $htmlstring ="<h2>"+key+"</h2>"+ 
 
          "<table border='1px'>"+ 
 
          "<tr>"+ 
 
           "<td>"+$data[key].Date+"</td>"+ 
 
           "<td>"+$data[key].Lesson+"</td>"+ 
 
           "<td>"+$data[key].Title+"</td>"+ 
 
           "<td>"+$data[key].Pages+"</td>" 
 
           +"</tr>" 
 
          +"</table>"; 
 
    $("#classes").append($htmlstring); 
 
    console.log($data[key].Date); 
 
    }); 
 
    
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="classes"> 
 
    
 
</div>

Answer 2

Шансы ошибок являются: первые данные проверки JSON

{ 

"Class1": { 
    "Date": 12/25/2016, 
    "Lesson": "Lesson 44", 
    "Title": "things to do", 
    "Pages": 194-97 
}, 

"Class2": { 
     "Date": 12/25/2016, 
     "Lesson": "Open Topic", 
     "Title": "TBD" 


    } 

и если правильно, проверьте случай Class1 => Class1, с помощью которого вы пытаетесь получить данные JSON и траверс

Answer 3

Использование нескольких циклов, ваши страницы значение является недействительным, на дату вы должны преобразовать его в действительную дату, используя дату():

var html = ''; 
$.each(data, function(key, val){ 
    html += '<h2>'+key+'</h2> <table id="sunday-school"> 
      <thead> 
      <tr>'; 
     $.each(val,function(i,v){ 
     html+= '<th id="'+i+'">'+v+'</th>'; 
     }); 
     html+='</tr></thead></table>'; 
    }); 

$('.classes').append(html); 

var data = { 
 

 
    "Class1": { 
 
    "Date": 12/25/2016, 
 
    "Lesson": "Lesson 44", 
 
    "Title": "things to do", 
 
    "Pages": "194 - 97" 
 
    }, 
 

 
    "Class2": { 
 
    "Date": 12/25/2016, 
 
    "Lesson": "Open Topic", 
 
    "Title": "TBD" 
 

 

 
    } 
 
}; 
 

 
var html = ''; 
 
$.each(data, function(key, val) { 
 
    html += '<h2>' + key + '</h2> <table id="sunday-school"><thead><tr>'; 
 
    $.each(val, function(i, v) { 
 
    if(i == "Date") { 
 
    v = Date(v); 
 
    } 
 
    html += '<th id="' + i + '">' + v + '</th>'; 
 
    }); 
 
    html += '</tr></thead></table>'; 
 
}); 
 
$('.classes').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section class="classes">