Zugriff auf andere Seiten im paginierten JSON-Array nicht möglich

Question

Ich versuche eine paginierte Ansicht von Daten zu erstellen, die von einer Remote-API zurückgegeben wurden. Ich kann jedoch nur die erste Seite der Daten sehen. Wenn ich mit der Maus über die Seitenumbruchschaltflächen klicke, werden die Links zu anderen Datenseiten korrekt erstellt. Wenn sie jedoch angeklickt werden, gelangen sie zurück zum Stammverzeichnis der Suchseite und die kürzlich erhaltenen Daten gehen verloren.

Ich verwende einen POST Anfrage auf meiner Form der Daten zu verlangen, weil, wenn ich versuche und eine GET Anfrage Vorlage meine EJS verwenden beschwert sich über die forEach Schleife, die die Daten anzeigt. Wenn ich die Schleife in eine for Schleife ändern, werden Daten nicht angezeigt.

Kann jemand bitte helfen, dieses Paginierungsproblem zu lösen? Mein Code ist unten.

// app.js 
var express = require('express'); 
var bodyParser = require('body-parser'); 
var app = express(); 
var nav = [{ Link: '/Map', Text: 'Map' }, { Link: '/Street', Text: 'Street' }]; 
var port = process.env.PORT || 5000; 

app.use(express.static('public')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 

app.set('views', './src/views'); 
app.set('view engine', 'ejs'); 

app.use('/Street', streetRouter); 

app.listen(port, function (err) { 
if (err) { 
    throw err; 
} 
console.log('Running server on port ' + port); 
}); 

// streetRoutes.js 
var express = require('express'); 
var streetRouter = express.Router(); 

var router = function (nav) { 
var historyCardService = require('../services/historyCardService')(); 
var streetController = require('../controllers/streetController')(historyCardService, nav); 

streetRouter.use(streetController.middleware); 

streetRouter.route('/') 
    .get(streetController.getStreet); 

streetRouter.route('/') 
    .post(streetController.getStreetByName); 

return streetRouter; 
}; 
module.exports = router; 

// streetController.js 
var streetController = function (historyCardService, nav) { 

var getStreet = function (req, res) { 
    console.log('>>> getStreet'); 
    res.render('streetView', { 
     title: 'Street', 
     nav: nav, 
     streetname: { streetname: 'waiting for input...' } 
    }); 
}; 

var getStreetByName = function (req, res) { 
    console.log('>>> getStreetByName'); 
    var streetName = req.body.street; 
    var streets = [{ streetname: streetName }]; 


    // Service. 
    historyCardService.getHistRecordCard(encodeURI(streetName), function (err, results) { 
     if (err) { 
      throw err; 
     } 

     var parsedJSON = JSON.parse(results); 

     var pageSize = 5; 
     var totalRecords = parsedJSON.length; 
     var pageCount = Math.round(totalRecords/pageSize); 
     var currentPage = 1; 
     var paginatedStreet = []; 
     var JSONList = []; 

     // Split parsedJSON into groups for pagination. 
     while (parsedJSON.length > 0) { 
      paginatedStreet.push(parsedJSON.splice(0, pageSize)); 
     } 

     // Set current page if specified as get variables e.g. /?page=2 
     if (typeof req.query.page !== 'undefined') { 
      currentPage = +req.query.page; 
      console.log('>>> Ying ying ying' + currentPage); 
     } 

     JSONList = paginatedStreet[+currentPage - 1]; 

     JSONList.forEach(function (item) { 
      console.log('>>> ' + item.address + ' ' + item.preview_url + ' ' + item.pageCount); 
     }); 

     console.log('>>> Request for History Record Cards at: ' + streetName); 
     console.log('>>> Total # of records: ' + totalRecords); 
     console.log('>>> # of items on page: ' + JSONList.length); 
     console.log('>>> # of pages: ' + pageCount); 

     res.render('streetResultsView', { 
      title: 'Street', 
      nav: nav, 
      streetname: JSONList, 
      pageSize: pageSize, 
      totalRecords: totalRecords, 
      pageCount: pageCount, 
      currentPage: currentPage 
     }); 
    }); 
}; 
return { 
    getStreet: getStreet, 
    getStreetByName: getStreetByName, 
    middleware: middleware 
    }; 
}; 
module.exports = streetController; 

<!-- streetView.ejs --> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" /> 
<!--bower:css--> 
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" /> 
<!--endbower--> 
<!-- bower:js --> 
<script src="/lib/jquery/dist/jquery.js"></script> 
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
<!-- endbower --> 
<!--inject:css--> 
<link rel="stylesheet" href="/css/styles.css"> 
<link rel="stylesheet" href="/css/site.css"> 
<!--endinject--> 
<!--inject:js--> 
<script src="/js/site.js"></script> 
<!--endinject--> 

<title>SHBC - Leagcy Planning Search</title> 

<!-- Nav view --> 
<% include ./partials/navView %> 

<div id="wrapper" class="container-fluid"> 
    <div id="main" class="container-fluid"> 
    <!-- Start Main --> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <h4>Planning History Search</h4> 
      <div> 
       <a href="/" class="btn btn-sm btn-default"><i class="fa fa-angle-left"></i> Back</a> 
       <!-- Street Entry Field view --> 
       <div class="form-group"> 
        <form name="streetSearchForm" action="/Street" method="post"> 
         <label for="street">Please enter a street name within Surrey Heath</label> 
         <input type="text" id="street" name="street" class="form-control" /> 
         <input type="submit" value="Search"/> 
        </form> 
       </div> 
       <!-- Results List --> 
       <div class="row"> 
        <!-- History Record Card Results view --> 
        <!-- --> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- End Main --> 
</div> 
<!-- Footer view --> 
<% include ./partials/footerView %> 
</div> 

<!-- streetResultsView.ejs --> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" /> 
<!--bower:css--> 
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" /> 
<!--endbower--> 
<!-- bower:js --> 
<script src="/lib/jquery/dist/jquery.js"></script> 
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
<!-- endbower --> 
<!--inject:css--> 
<link rel="stylesheet" href="/css/styles.css"> 
<link rel="stylesheet" href="/css/site.css"> 
<!--endinject--> 
<!--inject:js--> 
<script src="/js/site.js"></script> 
<!--endinject--> 
<title>SHBC - Leagcy Planning Search</title> 

<!-- Nav view --> 
<% include ./partials/navView %> 

<div id="wrapper" class="container-fluid"> 
    <div id="main" class="container-fluid"> 
     <!-- Start Main --> 
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3"> 
       <h4>Planning History Search</h4> 
       <div> 
        <a href="/" class="btn btn-sm btn-default"><i class="fa fa-angle-left"></i> Back</a> 
        <!-- Street Entry Field view --> 
        <div class="form-group"> 
         <form name="streetSearchForm" action="/Street" method="post"> 
          <label for="street">Please enter a street name within Surrey Heath</label> 
          <input type="text" id="street" name="street" class="form-control" /> 
          <input type="submit" value="Search"/> 
         </form> 
        </div> 
        <!-- Results List --> 
        <div class="row"> 
         <!-- History Record Card Results view --> 

         <ul class="list-group"> 
          <% streetname.forEach(function (item) { %> 
           <li class="list-group-item"><a href="<%= item.preview_url %>" target="_blank"><%= item.address %></a></li> 
          <% }) %> 
         </ul> 

         <% if (pageCount > 1) { %> 
          <ul class="pagination"> 
           <% if (currentPage > 1) { %> 
            <li><a href="/Street?page=1">&laquo;</a></li> 
           <% } %> 
           <% var i = 1; 
           if (currentPage > 5) { 
            i = +currentPage - 4; 
           } %> 
           <% if (i !== 1) { %> 
            <li class="disabled"><a href="#">...</a></li> 
           <% } %> 
           <% for (i; i<=pageCount; i++) { %> 
            <% if (currentPage == i) { %> 
            <li class="active"><span><%= i %> <span class="sr-only">(current)</span></span></li> 
           <% } else { %> 
            <li><a href="/Street?page=<%= i %>"><%= i %></a></li> 
           <% } %> 
           <% if (i == (+currentPage + 4)) { %> 
            <li class="disabled"><a href="#">...</a></li> 
            <% break; } %> 
           <% } %> 
           <% if (currentPage != pageCount) { %> 
            <li><a href="/Street?page=<%= pageCount %>">&raquo;</a></li> 
           <% } %> 
          </ul> 
         <% } %> 

         <!-- --> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- End Main --> 
    </div> 
    <!-- Footer view --> 
    <% include ./partials/footerView %> 
</div> 

// sample JSON data. 
[ 
    { 
     "address":"WINDRUSH - 44 DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/ilomxp3luk9xp1q4grdrc4cxjem4hxvj", 
     "rank":0.1}, 
    { 
     "address":"38 DELTA ROAD", 
     "preview_url":"https://surreyheath.box.com/s/5bbjk5y6ptusd7s4p400qfmaylntx85g", 
     "rank":0.1}, 
    { 
     "address":"18 DELTA CLOSE", 
     "preview_url":"https://surreyheath.box.com/s/14tiicq1su747irh7mukhoyg97u8t8f1", 
     "rank":0.1}, 
    { 
     "address":"35 DELTA ROAD", 
     "preview_url":"https://surreyheath.box.com/s/jmjtou0jv3o55wt5hpg8zlbwvt568p87", 
     "rank":0.1}, 
    { 
     "address":"35A DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/uj3v2n5q2dzjkkopi5vqvj539crvwl62", 
     "rank":0.1}, 
    { 
     "address":"37 DELTA ROAD", 
     "preview_url":"https://surreyheath.box.com/s/0havuuz7ylrvq1m5l9nor1pde28mr9ap", 
     "rank":0.1}, 
    { 
     "address":"39 DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/s07cl401bjl7aixl0d2yxgawo0o0l07d", 
     "rank":0.1}, 
    { 
     "address":"ROSLEN - 56 DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/9u4uqckp3p2y3djifho2y5dnzrnwsnj4", 
     "rank":0.1}, 
    { 
     "address":"RHO - 54 DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/vcrutb20f0pkv6ykbvk7qxy6rbknn91y", 
     "rank":0.1}, 
    { 
     "address":"42A DELTA ROAD - CHOBHAM", 
     "preview_url":"https://surreyheath.box.com/s/rxb1r11vlxv37mzejycp5lex02ftdmqi", 
     "rank":0.1 
    } 
] 

Answer 1

ändern diese Zeilen: streetRouter.route('/street/:name') und var streetName = req.params.street (und was auch die Links erzeugt, so ist es, dass übereinstimmt). Wenn es nicht richtig funktioniert, würde ich zurück zu GET für diese Route gehen .. Wenn Sie ein Problem mit dem for/forEach haben, können Sie hier posten oder fügen Sie einfach einen Versuch/Fang um es.