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，我甚至离开了我试图尝试的ajax评论：

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

使用多个循环，您的网页值无效，对于您需要使用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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

$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);
  });

＆＃13;

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

＆＃13;

Answer 3

错误的机会是：首先检查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 =＆gt; class1用于获取json数据并遍历

使用jquery将Json Data加载到表中

3 个答案: