Basic AJAX GET call with AngularJS

Question

I'm writing a Chrome extension using Angular JS. I need to load a HTML page from a third party site and parse it.

Using Angular JS $resource (is this there a better way?) I get some weird object with every character of the HTML page being one property of the object:

g {0: "<", 1: "!", 2: "D", 3: "O", 4: "C", 5: "T", 6: "Y", 7: "P", 8: "E", 9: " ", 10: "h", 11: "t", 12: "m", 13: "l", 14: " ", 15: "P", 16: "U", 17: "B", 18: "L", 19: "I", 20: "C", 21: " ", 22: """, 23: "-", 24: "/", 25: "/", 26: "W", 27: "3", 28: "C", 29: "/", 30: "/", 31: "D", 32: "T", 33: "D", 34: " ", 35: "X", 36: "H", 37: "T", 38: "M", 39: "L", 40: " ", 41: "1", 42: ".", 43: "0", 44: " ", 45: "T", 46: "r", 47: "a", 48: "n", 49: "s", 50: "i", 51: "t", 52: "i", 53: "o", 54: "n", 55: "a", 56: "l", 57: "/", 58: "/", 59: "E", 60: "N", 61: """, 62: " ", 63: """, 64: "h", 65: "t", 66: "t", 67: "p", 68: ":", 69: "/", 70: "/", 71: "w", 72: "w", 73: "w", 74: ".", 75: "w", 76: "3", 77: ".", 78: "o", 79: "r", 80: "g", 81: "/", 82: "T", 83: "R", 84: "/", 85: "x", 86: "h", 87: "t", 88: "m", 89: "l", 90: "1", 91: "/", 92: "D", 93: "T", 94: "D", 95: "/", 96: "x", 97: "h", 98: "t", 99: "m"…}

This is my resource interface definition:

[...]
factory('search', function($resource) {
    return $resource('http://www.example.net/search/:title');
}).
[...]

This is how I use it:

var test = search.get({title: 'The King'}, function(data) {
    console.log(data);
});

Is there a way to receive the HTML page either as a string or a DOM tree so I can the parse it?

That looks like a string object try console.log(data.toString()); to get a string primitive. — Musa
– Musa, Commented Sep 11, 2013 at 21:09

m59 · Accepted Answer · 2013-09-12 06:16:20Z

3

Use the $http service rather than $resource. You also wouldn't want to include the extra $resource script/dependency just for that.

Simple usage:

$http.get('path/here').then(function(response) {
  console.log(response.data);
});

An example of implementing an $http call with good application architecture: Live demo here (click).

var app = angular.module('myApp', []);

app.factory('myService', function($http, $q) {
  return {
    getPage: function(page) {
     var deferred = $q.defer();

     $http.get(page).then(function(response) {
       deferred.resolve(response.data);
     });

     return deferred.promise;
    }
  };
});

app.controller('appCtrl', function($scope, myService) {
  $scope.page = myService.getPage('test');
});

answered Sep 12, 2013 at 6:16

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

Basic AJAX GET call with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related