How can I make a Handlebars file using two different routes?

Question

I am working on scraping articles from a news site. I successfully cleared the articles and the data successfully reaches the interface. (This is console.log correct). My problem is that I can’t get the data for rendering on the page using the button - the data only fills the page when updating.

I know the problem is with Handlebars, because if I try to render the page using jQuery, it will work.

I believe this is due to my routes. I send data to the page using the / articles route, but as you can see, I do not specifically use res.render or res.redirect. I think that’s why this doesn’t work? However, I am not sure how to fix this. I'm a little shaky on routes and callbacks. I am new to coding, but I assure you that I have researched and tried numerous fixes to no avail. Any help or guidance is appreciated. Thank.

app.get("/", function(req, res) {
  db.Article
  .find({})
  .then(function(dbArticle) {
  // res.render("index");
  res.render("index", { articles : dbArticle });
});
});

app.get("/scrape", function(req, res) {
  axios.get("https://www.nytimes.com/section/technology?
  action=click&pgtype=Homepage&region=TopBar&module=HPMini
Nav&contentCollection=Tech&WT.nav=page")
  .then(function(response) {

  var $ = cheerio.load(response.data);

  $("a.story-link").each(function(i, element) {
    var results = {};
    results.link = $(this).attr("href");
    // console.log("This is my link " + results.link)
    results.blurb = $(this).children().find(".summary").text();
    // console.log("This is my blurb " + results.blurb)
    results.headline = $(this).children().find(".headline").text();
    // console.log("This is my headline " + results.headline)

  db.Article
    .create(results)
    .then(function(dbArticle) {
      res.json(dbArticle);  
      // res.end();

      // console.log("YES", dbArticle);
    })
    .catch(function(err) {
    res.json(err);
  })
  })
})
})

app.get("/articles", function(req, res) {
  db.Article
    .find({})
    .then(function(dbArticle) {
      res.json(dbArticle);
      // console.log(dbArticle, "scraped")
    })
    .catch(function(err) {
      res.json(err);
    });
});`

Answer 1

Somewhere you have a conceptual disconnect. I don’t know exactly where I am going to try to highlight some of the basics in the hope that I can fill in the corresponding gap somewhere along the way.

, - localhost:3000. , localhost, , . , , HTML, CSS, JavaScript .., .

URL- http://localhost:3000/ HTTP GET / localhost:3000. - , " " ( "", , , ). , "" . .

, . , " ", .

, , , app.get('/', .... res.render Handlebars HTML. , . , , , .

- , . , . , . . HTML (.. ) DOM. , , ( ) . , tag , element node DOM. DOM , .

" "? ? , . , , " ". , HTTP-/, , . . HTML HTML DOM, JSON JavaScript, .

, /, "" , . , . , , HTTP-, , Handlebars HTML.

, URL- , , CSS, JavaScript .. DOM, URL- HTTP- , . , /, , : .

, .

, - , .. , <a href="/other-url">click</a>. URL- .

HTML , , POST. <form> (, form < >, , <form> , DOM). . URL- , . ( , , ).

. -. AJAX.

AJAX, HTTP- JavaScript . , AJAX, , , .

. AJAX, JSON. jQuery JSON DOM . , .

, , , , . ​​ DOM, jQuery, , Handlebars. DRY, , .

- AJAX . Handlebars ( ) , JavaScript AJAX . , SEO, SPA , , .

. , AJAX, (, window.location.reload()). AJAX. URL- . , , , res.render, /.

, - .

AJAX , JSON HTML- . Handlebars , , HTML, , HTML .

. JSON, Handlebars . , JS Handlebars . , AJAX , , .

, , . , , , , , . , - , HTTP-.