Разбор JSON из БД и отображение на фронтэнде

Question

Хорошо, так что в основном у меня есть веб-скребок, и я сохраняю информацию о веб-скребке в локальной базе данных с именем "db. json"

Мне было интересно, как решить эту проблему и имея отображение информации в представлении. Я привык работать как PSQL, так что делать это для меня по-другому ... Я ценю помощь, и я планирую настроить как работу cron и тому подобное, но я сделаю это позже.

Текущие частичные задания отображаются в базе данных PSQL и получают примерную информацию прямо сейчас, так что она будет изменена ..

У меня также были проблемы с получением ее для получения названия вакансии для более ... организованного json, но для примера

job: jobs.title

, который, как я рассчитывал, получит название должности, ничего не получил, потому что у меня это вне функции?

Вот код:

Передача информации в БД находится в нижней части функции searchJobs.

webScraper. js:

debug = require("../models/conn");
const puppeteer = require("puppeteer");
const axios = require("axios");
const cheerio = require("cheerio");
const db = require("../public/scripts/db")

async function searchJobs(i) {
  const url = await axios
    .get("https://indeed.com/jobs?q=Web+Developer&l=Atlanta&fromage=last")
    .then(response => response)

    .then(res => {
      const jobs = [];
      const $ = cheerio.load(res.data);

      $(".result").each((index, element) => {
        const title = $(element)
          .children(".title")
          .text();
        const linkToJob = $(element)
          .children(".title")
          .children("a")
          .attr("href");
        const body = $(element)
          .children(".summary")
          .text();
        jobs[index] = { title, linkToJob, body };
      });
      console.log(jobs);
      // Push jobs to JSON DB
      db.get('jobs').push({
        job: jobs
      }).write();
      return jobs;
    });
  return url;
}

Это скрипт, который записывает информацию в файл json.

дБ. js:

low = require("lowdb"),
    FileSync = require("lowdb/adapters/FileSync");


const adapter = new FileSync('db.json')
const db = low(adapter)

db.defaults({ jobs: [], body: []})
    .write()


module.exports = db;

module.exports = searchJobs;

Это маршрут работ

заданий. js:

    const express = require("express"),
  router = express.Router();
jobModel = require("../models/jobModel");

// gets job page
router.get("/", async function(req, res) {
  const jobData = await jobModel.getAllJobs();

  console.log(jobData);

  res.render("template", {
    locals: {
      title: "jobs",
      jobData: jobData
    },
    partials: {
      partial: "partial-jobs"
    }
  });
});

module.exports = router;

Answer 1

Вам не нужно создавать какую-либо структуру моделей для такой простой задачи, используя lowdb.

Ваши searchJobs устанавливают jobs неправильно внутри db.json И это потому, что в конце удаления вы push весь массив jobs в поле с именем job, которое принадлежит jobs. Это, очевидно, приведет к получению таких данных:

{
  "jobs": [
    {
      "job": [
        {
          "title": "...",
          "linkToJob": "...",
          "body": "..."
        },
        {
          "title": "...",
          "linkToJob": "...",
          "body": "..."
        },
        ...
    }
  ],
  "body": []
}

, что не то, что вам нужно. Таким образом, вместо использования:

db.get('jobs').push({
  job: jobs
}).write();

вы должны использовать:

db.set('jobs', jobs).write();

, и тогда у вас будет формат данных JSON, подобный следующему:

{
  "jobs": [
    {
      "title": "...",
      "linkToJob": "...",
      "body": "..."
    },
    {
      "title": "...",
      "linkToJob": "...",
      "body": "..."
    },
    ...
  ],
  "body": []
}

и теперь у вас есть правильная коллекция jobs, которую вы можете использовать для отображения данных.

Express сервер имеет механизм шаблонов ( "Использование шаблонизаторов с Express" ), который поддерживает ( среди прочих ) E JS шаблонов. Вы можете использовать шаблон E JS и получать / передавать задания в нем по маршруту root:

Код для express файл сервера server.js

const low = require("lowdb");
const FileSync = require("lowdb/adapters/FileSync");
const express = require('express');
const app = express();
const port = 3000;

const adapter = new FileSync('db.json');
const db = low(adapter);

// Set express views template engine to EJS
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  // Get the jobs collection
  const jobs = db.get('jobs').value();

  // Render the jobs EJS template by passing the jobs
  res.render("jobs", { jobs });
});

app.listen(port, () => console.log(`Listening on port ${port}!`))

E JS шаблон для рендеринга заданий jobs.ejs:

...
<body>
  <section id="jobs">
  <% for(const job of jobs) {%>
    <div class="job">
      <a href="<%= job.linkToJob %>"><h3><%= job.title %></h3></a>
      <p><%= job.body %></p>
    </div>
  <% } %>
  </section>
</body>
...

И окончательный webScraper.js:

const axios = require("axios");
const cheerio = require("cheerio");
const db = require("./db");

async function searchJobs() {
  const url = await axios
    .get("https://indeed.com/jobs?q=Web+Developer&l=Atlanta&fromage=last")
    .then(response => response)

    .then(res => {
      const jobs = [];
      const $ = cheerio.load(res.data);

      $(".result").each((index, element) => {
        const title = $(element)
          .children(".title")
          .text();
        const linkToJob = $(element)
          .children(".title")
          .children("a")
          .attr("href");
        const body = $(element)
          .children(".summary")
          .text();
        jobs.push({ title, linkToJob, body });
      });

      // Push jobs to JSON DB
      db.set('jobs', jobs).write();

    });
}

Теперь, если вы запустите сервер express и посетите root маршрут, вы увидите что-то вроде этого ( после запуска webScraper.js конечно ):

.job {
   margin-bottom: 10px;
   border: 1px grey solid;
   padding: 10px;
   border-radius: 5px;
   background-color: lightgray;
 }

<section id="jobs">
  <div class="job">
    <a href="/rc/clk?jk=45633fe1e5f39cc8&amp;fccid=0e1982cac02545cc&amp;vjs=3">
      <h3>Freelance Web Developer</h3>
    </a>
    <p>Extensive knowledge of HTML, CSS, Javascript/jQuery.</p>
  </div>
  <div class="job">
    <a href="/rc/clk?jk=b554d8be38d65cba&amp;fccid=8c101aef95dbfdf6&amp;vjs=3">
      <h3>Web Developer</h3>
    </a>
    <p>VenU is looking for a talented and reliable developer to join an elite development team.
 Applicants must be proficient in Responsive Design, with experience…</p>
  </div>
  <div class="job">
    <a href="/rc/clk?jk=8edc3f88b6ec3083&amp;fccid=9899b2a8ca7c5e21&amp;vjs=3">
      <h3>Web Developer</h3>
    </a>
    <p>We&#39;re looking for a web developer with an excellent eye for design as well as strong HTML &amp; CSS skills.
 The web developer will be responsible for creating new…
    </p>
  </div>
</section>