jsonのテーブルにJsonのデータをロードする

Question

このフォーラムで同様の質問をした後、広範な検索を行い、私はパスしています.Jsonから情報を読み込むスクリプトを取得できません。私が作成しようとしているテーブルを作成したところ、jquery APIをほとんど手紙に従った。どんな助けもありがとう。私は正確に何を投稿するのかわからないが、それ以上の情報が必要な場合は、投稿するのが嬉しいです。

これはJSONデータである：

$(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ブロックはそれが行く：

{ 

    "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のですが、私も、私がしようとしようとしたオフコメントのAjaxを残しました：

構文エラーがどこにあるのかを指摘できますが、パスの質問があれば、どのように記述するのがいいか分かりますが、コンテナhtmlとscriptsフォルダは兄弟です。 もう一度ありがとうございます。エラーの

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" 


    } 

、あなたはJSONデータをフェッチし、

Answer 3

使用複数のループを横断しようとしていることにより、正しい場合は、ケースのClass1をチェック=> class1に、

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

：あなたのページの値は、日付のためにあなたは、日付を（）を使用して、有効な日付に変換する必要があり、無効です