GET JSON and build HTML table on a different page (Phonegap + Framework7)

问题

I am building a mobile app using Framework7 that scans a QR code (using this Phonegap plugin) that contains a JSON URL and GETs the relevant data. The data is then used to generate and populate a table. This is what my code looks like:

$$(document).on('page:init', '.page[data-name="scanner"]', function (e) { 
  $$('.page-content').find('#scanCode').on('click', function (e) { 
    cordova.plugins.barcodeScanner.scan(          
      function (result) {        
       app.request.json(result.text, function (data) {           
         var tableHtml = '';
         for(var i = 0; i < data.length; i+=1){
          tableHtml+= '<tr><td class="label-cell">Brand</td> <td class="numeric-only" id="brand">' +data[0].brand+ ' </td> </tr>';
          tableHtml+= '<tr><td class="label-cell">Model</td> <td class="numeric-only" id="model">' +data[0].model+ ' </td> </tr>';
         }          

         $$('.data-table table').html(tableHtml);         
       })  
     }
    );
  });
});

So far this works great, as long as the data-table is on the same page as the button which triggers the scanner function:

<div class="data-table card">        
  <table>                        
    <tbody>
    </tbody>
  </table>
</div>

However, I need the function to open a different page and create the table there. I have tried adding..

mainView.router.navigate('/results/')

.. to the script, but the function only opens the new page and doesnt create a table. I can see the JSON data logged in the console on the new page, but I don't know why it cannot build the table.

回答1:

i think you must pass parameters via route to a page (componentUrl).

scan_result.html

<template>
    .......
    <div class="data-table card">
        <table>
            <tr>
                <td class="numeric-only" id="brand">{{ $route.params.brand }} </td>
            </tr>
            <tr>                
                <td class="numeric-only" id="model">{{ $route.params.model }} </td>
            </tr>
        </table>
    </div>

</template>
<script>
    return {
        on: {

            pageAfterIn: function (e, page) {

                //or you can call params here
                var result_brand = this.$route.params.brand;
                var result_model = this.$route.params.model;

            }
        }
    }
</script>

routes.js

{
    path: '/results/:brand?/:model?/',
    componentUrl: 'scan_result.html',
},

navigation

mainView.router.navigate('/results/'+data[0].brand+'/'+data[0].model+'/')

Reference

https://framework7.io/docs/router-component.html#single-file-component https://framework7.io/docs/view.html#view-parameters

来源：https://stackoverflow.com/questions/57614805/get-json-and-build-html-table-on-a-different-page-phonegap-framework7

标签

javascript

phonegap

html-framework-7