无法访问分页JSON数组中的其他页面

时间：2017-01-30 10:08:31

标签： javascript node.js ejs

我正在尝试将从远程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
    }
]

1 个答案:

答案 0 :(得分：0)

更改这些行：streetRouter.route('/street/:name')和var streetName = req.params.street（以及生成链接的任何内容，因此它与之匹配）。如果它不能正常工作，我会回到GET那条路线..如果你有for / forEach的问题，你可以在这里发帖或者只是添加一个try / catch。

相关问题
最新问题