Set values to html tag from angularjs controller not working

Question

I want to show the user profile values in HTML via an AngularJs controller, but it isn't showing in the html <p> where I bind them. jsfiddle

AngularJs App:

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

app.service('UserService', function () {
    var userDetails = [{
            id : 27,
            first_name : 'Addy',
            last_name : 'Villiams',
            gender : 1,
            email : '[email protected]',
            creation_date : '2015-09-23 10:53:19.423',
            age : 25,
            profile_pic : 'avatar.get?uid=27'
    }];

    this.get = function () {
        return userDetails;
    }
});


app.controller('UserController', function ($scope, UserService) {

    $scope.userinfo = UserService.get();

});

HTML:

<div ng-controller="UserController">
    <p>{{userinfo.id}}</p>
    <p>{{userinfo.first_name}}</p>
</div>

You are returning an array from your service var userDetails = [{ try returning just the straight object.... fiddle — Callum Linington
– Callum Linington, Commented Oct 5, 2015 at 7:22

Tushar · Accepted Answer · 2015-10-05 07:23:26Z

4

The returned object from service is an array with one object.

$scope.userinfo = UserService.get()[0]; // Get the first element from array

Demo

Or change the service to return an Object instead of array.

var userDetails = {
    id: 27,
    first_name: 'Addy',
    last_name: 'Villiams',
    gender: 1,
    email: '[email protected]',
    creation_date: '2015-09-23 10:53:19.423',
    age: 25,
    profile_pic: 'avatar.get?uid=27'
};

Demo

answered Oct 5, 2015 at 7:23

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

1 Comment

Tushar Over a year ago

@PraveenRawat Welcome! :)

Grissom · Accepted Answer · 2015-10-05 07:33:48Z

1

So your service UserService.get() returns array of objects so userinfo.id and userinfo.first_name are undefined. You can resolve it returning just object or using on view userinfo[0].id and userinfo[0].first_name. Please check fiddle http://jsfiddle.net/rawat/k3phygpz/533/

edited Oct 5, 2015 at 7:33

answered Oct 5, 2015 at 7:25

Grissom

1,0829 silver badges22 bronze badges

Comments

Tushar · Accepted Answer · 2015-10-05 08:32:17Z

1

Remove the [] braces - you should return an object not an array:

var userDetails = {
    id: 27,
    first_name: 'Addy',
    last_name: 'Villiams',
    gender: 1,
    email: '[email protected]',
    creation_date: '2015-09-23 10:53:19.423',
    age: 25,
    profile_pic: 'avatar.get?uid=27'
};

edited Oct 5, 2015 at 8:32

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Oct 5, 2015 at 7:30

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Comments

Tushar · Accepted Answer · 2015-10-05 08:32:33Z

1

You initialized user object in array. You can remove the square brackets [] from user initialization:

var userDetails = {
    id: 27,
    first_name: 'Addy',
    last_name: 'Villiams',
    gender: 1,
    email: '[email protected]',
    creation_date: '2015-09-23 10:53:19.423',
    age: 25,
    profile_pic: 'avatar.get?uid=27'
};

or use

$scope.userinfo = UserService.get()[0];

edited Oct 5, 2015 at 8:32

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Oct 5, 2015 at 7:26

Dawid Pawłowski

1625 bronze badges

Collectives™ on Stack Overflow

Set values to html tag from angularjs controller not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related