JSON array to an HTML table and display the data inside td tag

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


  }
});

check out jsRender, or any templating plugin. You can just pass the whole array to a template and it will return the html — MrOBrian
– MrOBrian, Commented Jul 17, 2012 at 23:11
What are you using to render the json to html? That part seems important. — Kyeotic
– Kyeotic, Commented Jul 17, 2012 at 23:13
"...which json array id's equal to td id's..." Note that those id values will be valid HTML5, but invalid HTML4 or CSS id values (because they start with a digit). (And since jQuery uses CSS-style selectors for discovering elements...) Also, what you've shown for a "JSON array" is not valid JSON. (Needs to be wrapped in [ and ] and have commas between the entries.) — T.J. Crowder
– T.J. Crowder, Commented Jul 17, 2012 at 23:13

Musa · Accepted Answer · 2012-07-17 23:12:08Z

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}]

answered Jul 17, 2012 at 23:12

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konstantin Dinev · Accepted Answer · 2012-07-17 23:13:38Z

0

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.

answered Jul 17, 2012 at 23:13

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

Comments

Ali · Accepted Answer · 2012-07-17 23:19:54Z

0

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.

answered Jul 17, 2012 at 23:19

Ali

22.4k15 gold badges86 silver badges101 bronze badges

Comments

Giovanni Filardo · Accepted Answer · 2012-07-17 23:47:21Z

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 T.J. 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.

memo · Accepted Answer · 2012-07-18 01:56:30Z

0

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.

answered Jul 18, 2012 at 1:56

memo

71 silver badge8 bronze badges

Collectives™ on Stack Overflow

JSON array to an HTML table and display the data inside td tag

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related