Tips for extracting individual elements from an external website with AngularJS

I'm currently developing a new AngularJS application and I'm in need of something similar to JSOUP functionality but for AngularJS.

My Questions:

  • How can I retrieve the HTML code of an external website?
  • Is there a way to split the HTML elements (i.e. div, span etc.)?

I attempted to use $http.get in my app.js:

$scope.test = function(){
    $http.get("https://www.civiweb.com/FR/offre/71087.aspx").success(function(data){
        $scope.test = data;
    })
    .error(function(data){
      console.log("Error getting HTML : "+data);
    });

  }

In my index.html

<div>{{test}}</div>

Unfortunately, this approach is not working as expected.

I'd appreciate any help or guidance you can provide. Thank you!

javascriptangularjs

Answer №1

Not the best idea.

However, if you really want to proceed...

Note: This method is strictly for development purposes and may only work on your specific machine.

The first step would be to insert the HTML into an iframe element.

Next, navigate through the iframe's HTML structure to retrieve the content.

index.html

<iframe ng-src="{{remoteUrl}}" > </iframe>

app.js

var init = function($scope, $sce){
  $scope.remoteUrl = $sce.trustAsResourceUrl("http://example.com");
}

For more details about $sce, check out this explanation on How to set an iframe src attribute from a variable in AngularJS

Once the iframe content loads, you can start navigating through it.

Continue in app.js

myFrame= document.getElementsByTagName('iframe');
myFrame.load = function(e){
  myDiv = myFrame.document.getElementById("ContenuPrincipal_BlocA1_m_oCity");
  alert(myDiv.innerHTML);
 }

To make this method effective, you'll need to bypass the Same-origin policy. (One option is to modify your hosts file or use Chrome with additional flag)

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

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

After watching a tutorial on using Javascript with Autocomplete and a JSON file, I implemented the code successfully. However, I encountered an issue: When I clear the input field, all results from the file are displayed. I've tried adding code to cl ...

javascriptjsonautocomplete

Navigation bar remaining fixed on mobile devices

I have been working on a bootstrap site at http://soygarota.com/blog/public After checking the code multiple times, I have added the bootstrap.min.css, bootstrap.min.js, and jQuery. However, for some reason, the header navigation is not collapsing when vi ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The Formik fields are persistently showing validation errors even though they are filled in correctly. To view the issue, you can check out the code in the codesandbox link provided

const updateCreateFormField = (e) => { const { name, value } = e.target; setCreatForm({ ...createForm, [name]: value, }) console.log({ name, value }); }; //The onChange variable in the fields is updated on the above ...

javascriptreactjsvalidationformikyup

What is the best way to run a scheduled task automatically using node-cron?

I have a custom function that saves data to the database using the POST method. When testing it with Postman, I send an empty POST request to trigger the controller. Upon execution, the function triggers two more functions. One of them is responsible for ...

javascripttypescript

A step-by-step guide on signing up users with django-rest-framework and angularJS

Working on a project to create a single page web app using AngularJS and Django. I've decided that all communication between the front and back end should be done through Django-REST. Currently focusing on user registration, but struggling with figu ...

djangoangularjsrestdjango-rest-frameworkdjango-registration

Leveraging mathematical functions in projections within mongodb

Working on a Node and Mongoose project where I need to retrieve data from a collection that contains both negative and positive numbers in the field days. My goal is to display only the positive values of days, so I am using the Math.abs function. However, ...

javascriptnode.jsmongodbmongoose

How can I update the react state with the socket response?

As new data is received by the socket, I am attempting to update the state with this information. In the process of developing a simple chat application, my goal is to store the latest chat data received from the socket in the state. var socket = co ...

javascriptreactjssocket.io

What is the process for uploading files using AngularFire on Firebase Storage?

Despite watching multiple videos and tutorials, I am encountering a 403 error while working with Angular 1. To solve the issue of ng-model not supporting files, I created an Angular directive named file-model: app.directive('fileModel',['$ ...

javascriptangularjsfirebaseangularfirefirebase-storage

Determine the identifier of the subsequent element located within the adjacent <div> using jQuery

I have a form with multiple input elements. While looping through some elements, I need to locate the id of the next element in the following div. You can find the complete code on jsfiddle $(":text[name^=sedan]").each(function(i){ var curTxtBox = $(thi ...

javascriptjquery

Can an entire application built with a combination of PHP, JavaScript, and HTML be successfully converted to Angular 7?

After creating a complex application that heavily relies on JavaScript, PHP, HTML, and numerous AJAX calls, I am considering migrating the entire codebase to Angular 7. Is it feasible to achieve this transition without requiring a complete rewrite in Ang ...

javascriptphphtmlangular

Sharing data within angularJS applications can provide numerous benefits and increase

As a beginner in angularJS, I find myself still grappling with the concept of data sharing among various components like controllers, directives, and factories. It seems there are multiple methods available for facilitating communication between them -- ...

angularjsdata-sharing

Tips for enabling or disabling the submit button based on the dynamically uploaded file size

When selecting a file with a dynamic size (.rdl), the "SUBMIT" button should be disabled until the upload is complete. Once the file is uploaded, the button should enable again when revisiting the form. if(errorFoundInData == false){ $('#submit ...

javascriptjqueryangularjs

What makes realtime web programming so fascinating?

Working as a web developer, I have successfully created various real-time collaborative services such as a chat platform by utilizing third-party tools like Redis and Pusher. These services offer straightforward APIs that enable me to establish bidirection ...

javascriptdjangonode.jswebsocketpush-notification

What steps are involved in creating a video playlist with YouTube videos?

Is there a way to create a dynamic video playlist that supports embedded YouTube videos without refreshing the page? If a user clicks on another video, I want the video to change dynamically. You can check out this for an example. Do jPlayer, Video.js, Fl ...

javascriptajaxyoutubehtml5-videovideo.js

jQuery encountering TypeError while attempting to retrieve JSON data

Attempting to retrieve JSON data from the following URL using the provided code snippet: $.ajax({ type: "GET", url: "https://covid.ourworldindata.org/data/owid-covid-data.json/", success: function (data) { $("h5").e ...

javascriptjqueryjson

React Array Not Behaving Properly When Checkbox Unchecked and Item Removed

When using my React Table, I encountered an issue with checkboxes. Each time I check a box, I aim to add the corresponding Id to an empty array and remove it when unchecked. However, the current implementation is not functioning as expected. On the first c ...

javascripthtmlarraysreactjsnext.js

What is the process for accessing a table in indexedDB using Dexie.js immediately after it has been opened?

I am faced with the challenge of needing to verify if a specific table already exists in IndexedDB right after it has been opened. However, I am unsure how to access the DexieDB object inside the 'then' statement. this.db = new Dexie("DBNAME"); ...

javascriptpromiseindexeddbdexie

Initiating a specialized directive for managing form controls

I've created a specialized directive to populate 3 dropdowns and manage the change event within the controller. When the dropdown value changes, I successfully capture the new value in my controller function. Now, I need to trigger my custom directive ...

angularjsangularjs-directive

Actility's LoraWan platform integrated with Node-Red

I am currently working on learning how to implement an HTTP GET request for the Actility platform in Node-RED. However, I keep encountering an error 401 indicating that the authorization bearer is missing. This is how my setup looks: https://i.sstatic.ne ...

javascriptjsonhttprequestnode-red

Sending Ajax data to a controller function

I am looking for guidance on how to pass values from my view to my controller using ajax. As someone who is new to working with ajax, I would appreciate some assistance in understanding the process. Full Page @model ALSummary.Models.MonthReport @{ ...

javascriptajaxasp.net-mvc