CODEWITHSUNDEEP
javascriptjqueryjsontwitter-bootstrap
Vamsi Krishna
Vamsi Krishna

Reputation: 485

How do we generate table column text in a Bootstrap Modal using JSON

Currently, I am trying to generate a table using key value pairs defined in JSON (Key corresponds to column-1, while value corresponds to column-2). The output must be as follows: Expected output. I would like to know if there is any standard way of generating this table on demand using an Ajax call as we click the button. The JSON schema is defined as:

{
 'Name': 'Foo',
 'License Type' : 'Demo',
 'Num of Instances allowed' :20,
 'License Activation Date' :'20 jan 2014',
 'License Expiry Date':'20 Jan 2015'


}

My Code so far:

<button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="icon-info-sign"></i> License
</button>
<div id="event-modal" class="modal fade bs-example-modal-sm">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal" href="#">x</a>
        <h3 style='text-align:center;'>Test</h3>
      </div>
      <div class="modal-body">
         <table class="table table-bordered">

        <tbody>
          <tr>
              <td class='tright'><strong>Name</strong></td>
            <td class='tcenter'>Foo</td>
          </tr>
          <tr>
              <td class='tright'><strong>License Type</strong></td>
            <td class='tcenter'>Demo</td>
          </tr>
          <tr>
              <td class='tright'><strong>Num of Instances allowed</strong></td>
            <td class='tcenter'> 20</td>           
          </tr>
            <tr>
                <td class='tright'><strong>License Activation Date</strong></td>
            <td class='tcenter'>23 March 2014</td>
          </tr>
            <tr>
                <td class='tright'><strong>License Expiry Date</strong></td>
            <td class='tcenter'>23 March 2015</td>
          </tr>
        </tbody>
      </table>

      </div>
     <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

Thanks

Upvotes: 0

Views: 1079

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

Bootply : http://www.bootply.com/128620

JS : I set data here, but in your case data is the result of your ajax call. And document ready is the success function of your ajax call.

var data = {
 'Name': 'Foo',
 'License Type' : 'Demo',
 'Num of Instances allowed' :20,
 'License Activation Date' :'20 jan 2014',
 'License Expiry Date':'20 Jan 2015'
} ;

$(document).ready(function(){
  for( key in data) {
    var newline = "<tr><td class='tright'><strong>"+key+"</strong></td><td class='tcenter'>"+data[key]+"</td></tr>";
      $('.table tbody').append(newline); 
  }
});

HTML :

<button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="icon-info-sign"></i> License
</button>
<div id="event-modal" class="modal fade bs-example-modal-sm">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal" href="#">x</a>
        <h3 style="text-align:center;">Test</h3>
      </div>
      <div class="modal-body">
         <table class="table table-bordered">    
        <tbody>

        </tbody>
      </table>

      </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions