CODEWITHSUNDEEP
javascripthtmlangularjs
Aaron
Aaron

Reputation: 23

Parse an HTML document with AngularJS

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?

Upvotes: 2

Views: 4293

Answers (1)

Kursad Gulseven
Kursad Gulseven

Reputation: 2008

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 ---------------->

Upvotes: 1

Related Questions