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.

Have you checkd console tab and network tab for any error ? — Shantaram Tupe
– Shantaram Tupe, Commented Dec 13, 2016 at 6:20
thanks for all the replies so fast guys, all i am getting as an error is GET "file path here" 404 (Not Found), in console. — Los
– Los, Commented Dec 13, 2016 at 7:21

Veshraj Joshi · Accepted Answer · 2016-12-13 06:46:33Z

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>

answered Dec 13, 2016 at 6:46

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Veshraj Joshi Over a year ago

sorry i use id="classes" instead of class="classes", its same thing;you can run my code and get the result .... if you get doubt please let me know

Los Over a year ago

no the classes is fine i can work with it, but i need to pull the data of a json file, but when worst comes to worst i may use this :D

Veshraj Joshi Over a year ago

so whats new problem, feel free to have question

Los Over a year ago

could i use the $,getJson to get the info into $data?

madalinivascu · Accepted Answer · 2016-12-13 06:51:57Z

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

Collectives™ on Stack Overflow

Loading Json Data into a table with jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related