Parse an HTML document with AngularJS

Question

I'm attempting to write a simple drop-in hockey application in AngularJS. It will aggregate schedule data from local rinks and show it on a single page per metro area. However, some of the sites I'm aggregating from don't appear to support JSON, so I'm tasked with scraping HTML and then parsing it for time/date info. My question is: is there an idiomatic way to parse and display scraped HTML data in Angular?

I bootstrapped the project with Yeoman + Bower. The controller for Denver-area drop-in looks like this:

angular.module('dropinApp')
  .controller('DenverCtrl', function ($scope, $http, $sanitize) {

   // Pull data from a pre-scraped html frame to get around CORS issues.
   /* http://denveruniv-web.ungerboeck.com/coe/coe_p1_all.aspx?oc=01&cc=ICEDI30#mainContent */
   $http.get('/dropin_data/du-schedule.html').
      success(function(data, status, headers, config) {
        $scope.duHtmlData = data;
        $scope.duStatus = status;
      }).
      error(function(data, status, headers, config) {
        $scope.duData = data;
        $scope.duStatus = status;
      });

    // Yeoman/Bower stuff
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

  });

I've tried several different ways to inject this into my Denver partial. This is the most recent:

<!-- denver.html -->
<p>Denver Drop-In.</p>

<p ng-bind-html="duHtmlData">{{ duHtmlData }}</p>
<p>status is {{ duStatus }}</p>

This fails with:

Error: [$sanitize:badparse] The sanitizer was unable to parse the following block of html: <!-- Body Listing ---------------->...

I've also tried doing the parsing inside my controller: $scope.duParsedData = $sanitize(duHtmlData) which generates roughly the same error. The HTML file is simply a curl dump from DU's website.

Syntax issues aside, is this approach correct? Is there a more idiomatic way to scrape/parse third-party HTML in Angular?

Scrape the HTML with a server-side script of your own making, then convert the data to JSON for your Angular app to consume. — Blazemonger
– Blazemonger, Commented Nov 4, 2014 at 19:21
Hmm…I was hoping to keep everything "Angular", so to speak, but I fear you may be right. The simplest way would be to stuff everything into JSON and just load that from my Angular app. — Aaron
– Aaron, Commented Nov 4, 2014 at 19:35
@KursadGulseven - you can see the HTML I'm grabbing from the commented URL in the code. It's basically an HTML frame with a table inside that has a list of dates/times. I'm trying to parse out those dates/times. — Aaron
– Aaron, Commented Nov 4, 2014 at 19:37
they error is due to the $sce - docs.angularjs.org/api/ng/service/$sce - you need $sce.trustAsHtml(html); html to allow the binding. — Dylan
– Dylan, Commented Nov 4, 2014 at 19:39

Kursad Gulseven · Accepted Answer · 2014-11-04 20:23:44Z

1

You can use $sce service. See this fiddle.

$scope.t = $sce.trustAsHtml(html);

I added some of the page's Html. Comment did not raise an issue.

<!-- Body Listing ---------------->

answered Nov 4, 2014 at 20:23

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Over a year ago

Thanks to you and Dylan for putting me on the right path. This worked great.

Collectives™ on Stack Overflow

Parse an HTML document with AngularJS

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related