jquery json里面的数组到html表

时间:2014-07-11 03:35:16

标签: javascript jquery html json

我想从下面的json(结果数组)中获取简单的表格式,我希望使用jquery .each。我试过这个代码但是如何获取对象?我试过v.subject但是没有工作。

$.getJSON( "http://127.0.0.1:8000/ajax/list/?page=1&format=json", function( data ) {
   $.each( data, function() {
      $.each( this, function( i, v ) {
         console.log( v );
      });
   });
});

console.log(v)的结果

 Object { subject="ronald birthday", date="2014-06-13", time_start="11:17 PM"}
 Object { subject="ronald birthday", date="2014-06-19", time_start="7:17 PM"}

这是格式表

      <table >

        <tr>
         <td> <a href="#"> Rita Birthday</a> </td>
         <td> <a href="#"> Oct. 18, 2014</a> </td>
         <td> <a href="#"> 11:27 PM</a> </td>
        </tr>

       </table>

这是json,但只有结果数组应该在表中:

  

{&#34; count&#34 ;: 18,&#34; next&#34;:&#34; http://www.nothingonlytest.com/ajax/list/?page=2&format=json&#34;,&#34; previous&#34;:null,& #34;结果&#34;:[{&#34; subject&#34;:&#34; ronald birthday&#34;,&#34; date&#34;:&#34; 2014-06-13&#34; ,&#34; time_start&#34;:&#34; 11:17 PM&#34;},{&#34; subject&#34;:&#34; ronald birthday&#34;,&#34; date&#34 ;:&#34; 2014-06-19&#34;,&#34; time_start&#34;:&#34; 7:17 PM&#34;},{&#34; subject&#34;:&#34 ; Rita Birthday&#34;,&#34; date&#34;:&#34; 2014-10-18&#34;,&#34; time_start&#34;:&#34; 11:27 PM&#34;} ,{&#34; subject&#34;:&#34; tt&#34;,&#34; date&#34;:&#34; 2014-06-27&#34;,&#34; time_start&#34; :&#34; 10:31 PM&#34;},{&#34; subject&#34;:&#34; tt&#34;,&#34; date&#34;:&#34; 2014-06- 13&#34;,&#34; time_start&#34;:&#34; 10:31 PM&#34;},{&#34; subject&#34;:&#34; group event&#34;,&#34 ;约会&#34;:&#34; 2014-06-14&#34;,&#34; time_start&#34;:&#34; 3:31 AM&#34;},{&#34; subject&#34; :&#34;测试消息&#34;,&#34;日期&#34;:&#34; 2014-06-17&#34;,&#34; time_start&#34;:&#34; 3:32 AM& #34;},{&#34;主题&#34;:&#34;测试事件我ssage&#34;,&#34; date&#34;:&#34; 2014-06-14&#34;,&#34; time_start&#34;:&#34; 3:34 AM&#34;},{ &#34;主题&#34;:&#34; fd&#34;,&#34; date&#34;:&#34; 2014-06-20&#34;,&#34; time_start&#34;:& #34; 3:36 AM&#34;},{&#34; subject&#34;:&#34; fdf&#34;,&#34; date&#34;:&#34; 2014-06-14&# 34;,&#34; time_start&#34;:&#34; 3:38 AM&#34;}]}

1 个答案:

答案 0 :(得分:0)

这是一种方法。

  1. 您需要使用jquery selector获取表格对象。
  2. 然后,您需要使用for关键字循环json数据的results属性。
  3. 对于结果的每个对象,使用property accessor获取subject,date和time_start的属性。
  4. 创建一个行字符串,例如"<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td></tr>",然后使用jquery append将其附加到表格对象。
  5. 更新

    您需要循环结果属性。

    $.getJSON("http://127.0.0.1:8000/ajax/list/?page=1&format=json", function( data ) {
       $.each(data.results, function() {
          $.each( this, function( i, v ) {
             console.log( v );
          });
       });
    });