как извлечь nodejs очищенные данные и отобразить в html - PullRequest
1 голос
/ 27 марта 2020

Я пытаюсь почистить веб-сайт для некоторого контента, используя NodeJs, все работает хорошо, но затем отброшенный текст выводится только в консоли, однако я хочу передать свои удаленные данные на мою страницу html (index . html), но не знал, как это сделать.

вот мой nodejs файл (scrape. js)

const request = require('request');
const cheerio = require('cheerio');

request('https://store.steampowered.com/search/?filter=weeklongdeals', (error, response, html) =>{
if(!error && response.statusCode == 200){
    const $ = cheerio.load(html);

  $('.title').each((i,ele) => {
      const title = $(ele).text();
      console.log(title);
  });

}
})

и вот мой html файл, в котором данные должны отображаться в (индекс. html)

<!DOCTYPE html>
<html>
<title>Real Time Data</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
        <div class="w3-display-topleft w3-padding-large w3-xlarge">
            Real Time Data
        </div>
        <div class="w3-display-middle">
            <h1 class="w3-jumbo w3-animate-top">Real Time Data</h1>
            <center>
                <div id="getDDta">
                    <table>
                        <tr>
                            <th>Title</th>
                        </tr>

                        <tr>
                            <td>Data...</td>
                        </tr>
                        </table>
                </div>
            </center>
        </div>
        <div class="w3-display-bottomleft w3-padding-large">
            Powered by
             Real Time Data</a>
         </div>
        </div>
        </body>
      </html>

мой запрос очень прост, я хочу отобразить списанные данные в nodejs (scrape. js) в (индекс. html)

Ответы [ 2 ]

0 голосов
/ 28 марта 2020

Что сказал @Terry, но используйте get и map вместо нажатия элементов в каждом l oop:

let titles = $('.title').get().map(e => $(e).text())
0 голосов
/ 27 марта 2020

Вы должны быть в состоянии использовать E JS (или, возможно, любой другой движок шаблонов) для этой цели.

Мы загружаем заголовки в массив, а затем выполняем рендеринг с использованием e js .render.

Убедитесь, что вы установили e js, используя

npm install ejs

. В вашем проекте вам необходимо создать следующую структуру:

  • / index. js
  • / views / index.e js

index. js

const request = require('request');
const cheerio = require('cheerio');
const express = require('express');

var app = express();
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
    request('https://store.steampowered.com/search/?filter=weeklongdeals', (error, response, html) => {
        if(!error && response.statusCode == 200) {
            const $ = cheerio.load(html);
            let titles = [];
            $('.title').each((i,ele) => {
                const title = $(ele).text();
                console.log(title);
                titles.push(title);
            });
            res.render('index', { titles });
        }
    })

});

app.listen(8080);
console.log('Express listening on port 8080');

index. e js

<!DOCTYPE html>
<html>
<title>Real Time Data</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body style="padding: 2em">
    <table class="table table-striped table-bordered">
        <tr>
        <th>Title</th>
        </tr>
        <% for (let title of titles) { %>
        <tr>
        <td><%= title %></td>
        </tr>    
        <% } %>
    </table>
</body>
</html>

Затем перейдите к localhost: 8080 /, чтобы увидеть вашу визуализированную страницу.

Я создал онлайн-пример здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...