將Json數據加載到jQuery數據表中

經過廣泛的搜索並查看了此論壇上的所有類似問題後，我進入了一個en pass，我無法讓我的腳本從Json加載信息。我創建了一個我正在創建的表，我甚至將jquery API幾乎寫入了一個字母。任何幫助，將不勝感激。我不確定究竟要發佈什麼，但如果需要更多信息，我很樂意發佈它。將Json數據加載到jQuery數據表中

這是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個小時lol，al所以如果你有路徑問題，讓我知道如何最好地描述，但容器HTML和腳本文件夾是兄弟姐妹。再次感謝。錯誤的

來源

2016-12-13 Los

你有checkd任何錯誤'控制檯tab'和'網絡tab'？ –

感謝所有答覆如此之快的傢伙，所有我得到的錯誤是GET「文件路徑在這裏」404（未找到），在控制檯。 – Los

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

來源

2016-12-13 06:46:33

對不起，我使用id =「classes」而不是class =「classes」，它的相同的東西;你可以運行我的代碼，並得到結果....如果你有疑問請讓我知道 –

沒有類是好的我可以使用它，但我需要拉的JSON文件的數據，但最糟糕的時候，我可能會使用這個：D – Los

所以最新的問題，請隨時有問題 –

機會是：首先檢查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數據並遍歷

來源

2016-12-13 06:21:46 rahulsm

使用多個循環，你的網頁值無效，該日期需要使用日期（）將其轉換爲有效日期：

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

來源

2016-12-13 06:45:54 madalinivascu

將Json數據加載到jQuery數據表中

回答

相關問題