JSON数组到HTML表并在td标签内显示数据

Question

I have json array return as bellow

{"id":16,"minutes":146}
{"id":17,"minutes":137}
{"id":18,"minutes":123}
{"id":22,"minutes":84}

I'm trying to render above json array inside table tbody td which json array id's equal to td id's and display the minutes inside td tag

for example json id :16 minute:146 and display it in <td id="16">146</td>

    <table>
      <thead>
        <tr>
          <th>op</th>
          <th>Minutes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>op1</td>
          <td id="16">0</td>
        </tr>
        <tr>
          <td>op2</td>
          <td id="17">0</td>
        </tr>
        <tr>
          <td>op3</td>
          <td id="18">0</td>
        </tr>
<!--....and goes on -->
      </tbody>
    </table>

js

$.ajax({ url: statUrl, type: 'POST',
  data: {
      begin: begin,
      end: end
  },
  success: function(data){


  }
});

Answer 1

Your JSON is invalid it should only represent one object, a valid version of what you have will be

[{"id":16,"minutes":146},
{"id":17,"minutes":137},
{"id":18,"minutes":123},
{"id":22,"minutes":84}]

Answer 2

If your data IDs directly correspond to already existing DOM element IDs then it should be rather easy:

for (var i = 0;  i < data.length; i++) {
   $('#' + data[i].id).text(data[i].minutes);
}

This is using jQuery ofc.

Answer 3

you can use json_decode($json, true) in php to convert the json to an array then loop over it's elements and build your table.

If you want to do it client side, I think you must create table, tr and td elements manually and populate them. ExtJS has ready grid for this.

Server side is easier.

Answer 4

I created a jsFiddle here: http://jsfiddle.net/5pKjW/11/ As Musa stated, the JSON you posted is not valid, it should be an array containing all the objects. The code following is basically what you need to do inside the success callback, just use data instead of result . What I do is creating a table, appending a row for every element of the array and then appending the whole table to an element of the DOM.

var result = [{"id":16,"minutes":146},{"id":17,"minutes":137},{"id":18,"minutes":123},{"id":22,"minutes":84}];
var $table = $('<table><thead><tr><th>op</th><th>Minutes</th></tr></thead>'), 
    $tbody = $('<tbody>').appendTo($table),
    i;
for (i = 0; i < result.length; i++){
    $tbody.append('<tr><td>op' + (i+1) + '</td><td id="' + result[i].id + '">0</td></tr>');
}
$table.appendTo('#container');

As TJ Crowder commented, a valid HTML4 id attribute can't start with a digit. If I were you, I would prefix it with a string ( <td id="prefix' + result[i].id + '">0</td> ).

MrOBrian suggested to use a rendering engine. Maybe for a simple case like this, and if you don't need a rendering engine elsewhere, it's an overkill, but that's absolutely something worth considering, if you need something more complicated in the future.

Answer 5

as suggested fixed json array to

{
 "25":72.3833,
 "17":116.3167,
 "16":25.75,
 "34":28.3333,
 "29":136.8831,
 "19":40.9166,
 "32":43.6,
 "22":83.9001
}

and js

$.getJSON(statUrl, {begin: begin, end: end}, function(data) {

      $.each(data, function(key, val) {
          $('#op_' + key).text(Math.ceil(val));//also fixed td id
      });
});

so got the result as expected. thanks for your time.