Hello im a newbie when it comes to js, but I built this web scrapper ( 'Index.js') and was trying to pass it into my ('index.html') file and view it thew the inspection window on my browser and can't get it to work. In console im just seeing
Uncaught ReferenceError: require is not defined
at index.js:6:15
index.js6:15 ---- const axios = require('axios')
-------------index.html file (im trying to load in chrome):
The scraper works when i run it through npm node as you can see in the terminal in VScode ( Picture attached). I would expect to see the list logged in the console on chrome, but all I get is the error. Sorry if im overlooking something simple my apologies.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFL Extension</title>
</head>
<body>
<div>
<h2>BFL</h2>
<li id="bfl"></li>
</div>
</body>
<script src="index.js"></script>`
------------index.js file with web scraper:
`const port = 3000
const axios = require('axios');
const cheerio = require('cheerio');
const express = require('express');
const app = express();
const url = 'https://www.blincmagazine.com/forum/wiki_index.php?title=BASE_Fatality_List'
axios.get(url, { headers: { Accept: 'application/json', 'Accept-Encoding': 'identity' }, params: { trophies: true } })
.then(response => {
const html = response.data
const $ = cheerio.load(html)
const list = []
$('.level-1', html).each(function(){
const number = $(this).text().replace(/\D/g,'');
const name = $(this).text().replace(/[0-9]/g, '')
const link = $(this).find('a').attr('href')
list.push({
number,
name,
link
})
})
console.log(list)
}).catch(error => console.log(error))
app.listen(port, () => console.log(`server running on PORT ${port}`) );`
