Request JSON from server and populate table

Questions
1

Hello,

I am new to Framework7 (and coding general) and so far I am loving it. Using a button, I would like to request data from a JSON file and populate a table. I have followed the request/AJAX steps in the docs and have successfully logged the JSON data to the console when a button is clicked:

$$(document).on('page:init', '.page[data-name="results"]', function (e) { 
    $$('.page-content').find('#loadResults').on('click', function (e) { 
        app.request.json('my-URL', function (data) {
            console.log(data);
        });    
    });
})

image

I would now like to populate a table with the requested JSON data. For example:

<div class="data-table card">
  <table>                        
    <tbody>
      <tr>
       <td class="label-cell">Type</td>  
       <td class="numeric-only" id="ac_2_type"></td>
      </tr>
      <tr>
       <td class="label-cell">Noise</td>
       <td class="numeric-only" id="ac_34_noise"></td>
      </tr>
    </tbody>
  </table>
</div>

Could anyone please help show me how to do this? Thanks in advance.

2

Simply create the html and set it in the table?

        app.request.json('my-URL', function (data) {|
           var tableHtml = '';
           for(var i = 0; i < data.length; i+=1){
            tableHtml+= '<tr><td class="label-cell">Type</td> <td class="numeric-only" id="ac_2_type">' +data[i]['ac_2_typ']+ ' </td> </tr>';
           }
         $$('.data-table table').html(tableHtml);

        });
2 Likes
3

Wow so easy! Thanks Kieth, that really helped me and is exactly what I was trying to do. How could I take it one step further and build/populate the table on a different page, keeping the button on the home page. What I have tried so far:

app.request.json('my-URL', function (data) {      
    mainView.router.navigate('/newPage/');
    var tableHtml = '';
       for(var i = 0; i < data.length; i+=1){            
          tableHtml+= '<tr><td class="label-cell">Type</td> <td class="numeric-only" id="ac_2_type">' +data[0].ac_2_type+ ' </td> </tr>'; 
       }        
    $$('.data-table table').html(tableHtml);
});

Clicking the button opens the new page and logs the JSON data to the console, but the table isn’t created and populated. Any ideas?

1 Like
4

Im not sure there is a simple way to do that. What i would recommend is doing it in the newPage on init. so in your routes:

    routes: [
        {
            path: '/newPage/', //route you probably already have
            url: './pages/newPage.html',
            on: {
                pageInit: function (e, page) {  //adding pageInit
                    app.request.json('my-URL', function (data) {
                        mainView.router.navigate('/newPage/');
                        var tableHtml = '';
                        for (var i = 0; i < data.length; i += 1) {
                            tableHtml += '<tr><td class="label-cell">Type</td> <td class="numeric-only" id="ac_2_type">' + data[0].ac_2_type + ' </td> </tr>';
                        }
                        $$('.data-table table').html(tableHtml);
                    });
                },
            }
        
    ]