Can't access properties of my Javascript object

Question

I'm using Angular.js to fetch a single record from my API. I'm getting the record back as an object, I can log the object and see it's properties but I cannot access any of the properties. I just get undefined.

var template = Template.get({id: id});
$scope.template = template;
...
console.log(template); // displays object
console.log(template.content); // undefined

Screenshot of console.log(template);

UPDATE

var id = $routeParams.templateId;
var template = Template.get({id: id});
$scope.template = template;

/*** Template placeholders ***/
$scope.updatePlaceholders = function () {
    var placeholders = [];
    var content = template.content;

    console.log(template); // dumps the object in the screenshot
    console.log("content" in template); // displays false

    // get placeholders that match patter
    var match = content.match(/{([A-z0-9]+)}/gmi);
    ...
}

$scope.$on('$viewContentLoaded', function(){
    $scope.updatePlaceholders();
});

@Yatrix "content" in template and template.content are two totally different things — Ian
– Ian, Commented May 2, 2013 at 15:25
Service calls are asynchronous. The return value is not likely to be your expected data until the ajax call returns. — Jim Cote
– Jim Cote, Commented May 2, 2013 at 15:25
Chrome shows you the properties of a logged object as they are at expansion time, not as the object existed at log time. At log time, template doesn't have a content property, but by the time you get around to expanding the log entry for inspection, the asynchronous request has completed, and it does have a content property. — apsillers
– apsillers, Commented May 2, 2013 at 15:37

Mike Robinson · Accepted Answer · 2013-05-02 15:55:34Z

You need to wait for your HTTP request to complete, then specify what to do in the callback. In this case I've taken it a step further and added a listener to your template object so there's no callback dependency between updatePlaceholders and your resource.

var id = $routeParams.templateId;
var template = Template.get({id: id}, function(res) {
    $scope.template = template;
});

/*** Template placeholders ***/
$scope.updatePlaceholders = function () {
    var placeholders = [];
    var content = $scope.template.content;

    console.log($scope.template); 
    console.log("content" in $scope.template); 

    // get placeholders that match patter
    var match = content.match(/{([A-z0-9]+)}/gmi);
    ...
}

$scope.$watch('template', function(newValue){
    if(newValue) $scope.updatePlaceholders();
});

Collectives™ on Stack Overflow

Can't access properties of my Javascript object

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related