AngularJS - how to access array in object to use in ng-bind

Question

I'm learning AngularJS and I'm trying to insert a 'sanitised' title into a h2 within a ng-repeat, however I cannot work out how to access the data within the array in the object. Everything else is working fine, I just need the 'title' value.

HTML:

<div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list">              
<h2><a ng-href="{{question.link}}" title="{{question.title}}" target="_blank" ng-bind-html="title"></a></h2>
</div>

This is the JS:

var loadFeed = angular.module('loadFeed', ['ngSanitize']);

loadFeed.controller('feedController', ['$scope', '$http', function($scope, $http) {

    $scope.questions = [];    
    $http({
        method: 'GET',
        url: 'https://api.stackexchange.com/2.2/questions?pagesize=10&order=desc&sort=votes&tagged=angular&site=stackoverflow'
    }).then(function(feed) {

        console.log('success');
        console.log(feed);

        $scope.questions = feed.data.items;
        console.log($scope.questions);  

        $scope.title = $scope.questions.title; // This is what I need for the ng-bind


    },function(error) {
        console.log('error');
        console.log(error);
    }); 

}]);

This does return an individual value (the first item's title):

$scope.title = $scope.questions[0].title;

However, I need the result of this (it's blank):

$scope.title = $scope.questions.title;

I've tried an angular.forEach and a JS loop however this just repeats every heading within the one list item.

Is there anything I am missing?

With $scope.title = $scope.questions.title; your are trying to access the property title of an array. This will return undefined. So, why don't you let $scope.title = $scope.questions[0].title;? — scipper
– scipper, Commented Oct 9, 2017 at 13:32
This puts the title of the first object in the array in every ng-repeat div rather than the title relating to each item — Laura
– Laura, Commented Oct 9, 2017 at 13:38

Nicholas Tower · Accepted Answer · 2017-10-09 13:41:01Z

1

If you want each link to display the title of its corresponding question, then change ng-bind-html="title" to ng-bind-html="question.title". You're in the middle of an ng-repeat, and in that context question is whichever question object is currently being rendered, so question.title is the title of that question.

I think the above should fix your problem, but if you want to take the array of questions and produce a new array which just contains the titles, you could use Array.map:

var titles = $scope.questions.map(function (question) {
    return question.title;
});

That will step through the array, pluck out the title from each one, and produce a new array with just the titles.

answered Oct 9, 2017 at 13:41

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

1 Comment

Laura Over a year ago

THANK YOU - that took me way too long for such a simple answer! Thanks for the explanation also, makes much more sense.

Collectives™ on Stack Overflow

AngularJS - how to access array in object to use in ng-bind

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related