Loading Json Data into a table with jquery

Question

After and extensive search and looking at all the similar questions on this forum, I am at an en pass, I cannot get my script to load info from a Json. I created into a table I am trying to create, I even followed the jquery API almost to a letter. Any help would be appreciated. I am not to sure what exactly to post, but if any more info is required I am more than happy to post it.

This is the json 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"


  },

This is the Jquery, I even left the commented off ajax I attempted to try:

    $(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");

  });

Finally the HMTL block it will go to:

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

Even if any one can point out where the syntax error is I been at it for almost 8 hours lol, also if you have question of the path let me know how to best describe ,but the container html and the scripts folder are siblings. Thanks again.

Answer 1

Use multiple loops, your pages value is invalid, for the date you need to convert it to a valid date using date():

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

Answer 2

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