Scraping website content in real-time using Vue or JavaScript

Is there a way to extract data from a website once it has been fully loaded?

I have a process that iterates in a loop from 1 to 200, and I need to capture the results in the HTML once it reaches 200.

1. Can this be done? I am familiar with cheerio but unsure how to handle real-time data extraction after the process finishes.

2. How can I bypass CORS restrictions when making HTTP GET requests using axios?

I'm unclear on how to utilize a proxy in vue.config.js. The instructions I found were not comprehensive enough for my understanding.

Below is an example of my code (with some data altered for privacy reasons):

  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        <b>{{ messages.ip }} [{{ message.type }}]:</b>
        {{ message.blocked }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import cheerio from "cheerio";
export default {
  name: "ScrapIP",
  props: {
    msg: String,
    messages: Array
  },
  methods: {
    fetchUrl() {
      for (let i = 0; i < 5; i++) {
        const ip = "192.168.0." + i;
        const url = "http://xxx/yyy.org/lookup/" + ip + ".html";
        axios.get(url).then(response => {
          const $ = cheerio.load(response.data);

          setTimeout(() => {
            if ($(".global_data_cnt_DNSBLBlacklistTest").text() == 243) {
              this.messages.push({
                ip: ip,
                type: "Blacklist Test",
                blocked: $(".global_data_cnt_DNSBLBlacklistTest").text()
              });
            }
          }, 10000);
        });
      }
    }
  },
  created() {
    this.fetchUrl();
  }
};
</script>

Answer №1

While I don't have much experience with cheerio, puppeteer could potentially be a valuable tool for your project. By running an instance of chromium behind the scenes, it simplifies the process of carrying out specific tasks and makes it easier to extract data once the loop is complete. The main drawback, however, is its speed and dependency on node.js.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to load local image file for texture in Three.js

When attempting to utilize a local image for loadTexture in Three.js, I encountered the following error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at .... may not be loade ...

Trouble with browser caching when utilizing code-splitting for production? (Encountering difficulties fetching dynamically imported module)

Using Vue + Vite for my web application, I have implemented code-splitting in the router file for most routes. An example of this is: { path: "settings", name: "settings", component: () => import("../views/SettingsView.vue&q ...

Continuing to use a function multiple times may lead to a type error as it is not a

My program is designed to be a quiz where users have to answer questions. After answering, they will see a summary and then get the option to submit or redo the questions. The issue arises when users choose to redo a question. Upon redoing it, the summary ...

Real-time chart updates through REST API integration with JavaScript

I am searching for a JavaScript library that is capable of creating line charts and making calls to a REST API every few seconds (such as 5s or 3s) in order to update the line chart dynamically. I have found some libraries that support live chart updatin ...

"Utilize Ajax to trigger a custom alert message once data is loaded and ready

Is it possible to customize the data object in order to show a JavaScript alert saying "The email address has already been registered!"? Currently, the servlet returns a boolean indicating whether the email is already in the database. $('#emailInput ...

The reason behind my unsuccessful attempt to utilize AJAX with the Google GeoChart API

Learning about JavaScript is exciting! I recently tried incorporating a Google Geochart to generate visual reports. The sample code looked like this: function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country ...

Display a single value retrieved from the AJAX response array

Is there a way to display just one element from an array? Currently, the entire array is being shown but I only need to display the reason element. The other elements are not really relevant in this context. You can see what I have done in index.php. I wan ...

What is the proper way to initialize a function that interacts with the redux state?

Imagine a scenario where I have a function that retrieves a filepath from the state based on the filename provided as an input parameter. If the filepath does not exist in the state, it then fetches the filepath from a server URL. const getFilepath = (stat ...

Are you expecting an icosahedron particle system in three.js but only seeing squares instead?

I am new to three.js and I'm working on a project to create a solar system. I need a particle system where the particles are icosahedrons. Following a tutorial, I used the following function to create a particle system: function createParticleSystem( ...

Is there a way to properly dissect or iterate through this?

I have exhausted all possible methods to retrieve the data, but I am unable to solve this puzzle. The information is organized in a format like the following: [{"code":1000,"day":"Sunny","night":"Clear","icon":113,"languages": [{"lang_name":"Arabic","lan ...

The selection will remain hidden and attempting to make a choice will be ineffective

Received an HTML sample from another company () and now I am attempting to create a web form based on it (). Using the same scripts, the basic structure mirrors the sample closely. After meticulously comparing the code, I can't find any discrepancies. ...

Code in JavaScript often includes the use of variables to store and manipulate data

Do these blocks of JavaScript code serve the same purpose? // First Code Sample var first = prompt("Enter the first number:"); var second = prompt("Enter the second number:"); var sum = Number(first) + Number(second); alert(sum); // Second Code Sample ...

Removing data inputs with duplicate name attributes

I've encountered an issue where I need to selectively delete certain names while leaving others intact. However, when attempting to delete a specific name, the deletion action affects the first one in the list instead of the intended target at the end ...

Setting up various connections is made possible through Node.js Socket.io

In the process of developing a straightforward chat application using socket.io and incorporating passport.js for user authentication, an issue arises when users log out and then back in. The previous socket connection remains active, resulting in two conn ...

React component failing to re-render when state changes because of memoization strategy employed

In my React component, I am utilizing memoize-one to enhance the performance of filtering rows in a table. However, I've encountered an issue where newly inserted rows do not appear on the table unless I refresh the page or apply the filter. Upon che ...

Create a new TinyMCE plugin template that incorporates a category dropdown list feature

Currently, I am in the process of developing an external template manager using ASP.net for my company. This template manager allows users to perform all CRUD actions, including create, read, update, and delete. Various departments within the organizatio ...

Utilizing React Component Inheritance for Utilizing both Parent and Child Methods

Exploring Options After developing a fully functional component with state, props, and methods, I encountered an issue where the component needed to behave differently based on the operating system (iOS or Android). Initially, I used conditional statement ...

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

Exploring Vue.js Debugging in WebStorm

Currently, I am in the process of debugging a Nuxt + Vue.js application and I find myself needing to examine the description of an object that is being passed to one of my components' methods. Additionally, I desire to step through this method to iden ...

Implementing Pagination for JSON-list items in AngularJS

On my webpage, I have a large list of Json data that is organized with paging. The issue arises when selecting categories from the listbox as the data does not display properly. When "All" is selected, each page shows the correct pageSize(4). However ...