無法訪問分頁的JSON數組中的其他頁面

Question

我試圖將從遠程API返回的數據的分頁視圖放在一起，但是我只能看到數據的第一頁。當我將鼠標懸停在分頁按鈕上時，指向其他數據頁面的鏈接正在正確構建，但點擊後，它們將用戶帶回搜索頁面的根目錄，最近獲得的數據將丟失。

我在表單上使用POST請求來請求數據，因爲當我嘗試並使用GET請求時，我的EJS模板抱怨顯示數據的forEach循環。當我將循環更改爲for時，不顯示循環數據。

請問任何人都可以幫助解決這個分頁問題嗎？我的代碼如下。

// 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

更改這些行：streetRouter.route('/street/:name')和var streetName = req.params.street（以及任何產生的聯繫，所以它匹配）。如果它不能正常工作，我會回到GET的路線。如果你有for/forEach的問題，你可以在這裏發佈，或者只是添加一個try/catch。