Angular returns [object Object]

Question

my Angular code returns [object Object]. I am calling 2 controllers on different pages. First one sets the data on ng-click and the second one gets (displays) the data. Here is the code:

Angular App code:

    var careerApp = angular.module("careerApp", []);
careerApp.factory('myService', function () {
    var savedData = {};
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }
});
careerApp.controller("JobList", function ($scope,myService) {
    myService.set(data);
});
careerApp.controller("JobSelection", function ($scope, myService) {
    $scope.jobname = myService.get();
});

HTML on Page 1

<div class="center-details" ng-controller="JobList">
<div class="details" ng-click="set(data)" >
<h2 class="name" ng-model="jobtitle">
Winter
</h2>
<p><b>Job ID#</b> <span class="jobid">2017-01</span></p>
</div>
</div>

HTML on Page 2

<div ng-controller="JobSelection">
<label ng-bind="jobname"></label>
</div>

Where you getting the [object Object] ? in the console or in the html? — Manu Obre
– Manu Obre, Commented Jan 2, 2017 at 20:17

Trisped · Accepted Answer · 2018-08-21 23:03:48Z

4

You are bringing the whole object in

<label ng-bind="jobname"></label>

If you intented to write the object with a better formatting try changing it to:

<label> {{ jobname | json }}</label>

This way it will be formatted and printed as a json object.

edited Aug 21, 2018 at 23:03

Trisped

6,0442 gold badges51 silver badges65 bronze badges

answered Jan 2, 2017 at 20:23

Łukasz Trzewik

1,1652 gold badges11 silver badges27 bronze badges

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

2 Comments

user2185457 Over a year ago

by doing this as well, it gives output as "{}"

Łukasz Trzewik Over a year ago

@user2185457 then just change myService.set(data); to f.e. myService.set('text');

Manu Obre · Accepted Answer · 2017-01-02 21:41:11Z

1

Use Angular expressions intead of ng-bind. Otherwise you will have to specify a specific property of your object.

page 1

<div class="center-details" ng-controller="JobList">
<div class="details" ng-click="set('Winter')" >
<h2 class="name">
Winter
</h2>
<p><b>Job ID#</b> <span class="jobid">2017-01</span></p>
</div>
</div>

Controller:

careerApp.controller("JobList", function ($scope,myService) {
    $scope.set= function(data){
       myService.set(data);
    }
});

page 2

<label ng-bind="jobname"></label>
<label>{{jobname}}</label>

How to make it dynamically, based on the input

<input stype="text" ng-model="jobTitle" ng-change="set()" >
    <h2 class="name">
    {{jobTitle}}
    </h2>

Controller:

careerApp.controller("JobList", function ($scope,myService) {
        $scope.jobTitle = "";

        //This function will be called every time that jobTitle change its value.
        $scope.set= function(){
           myService.set($scope.jobTitle);
        }
    });

Notes:

Take into account that ng-model directive binds an input, select, textarea value to a property on the scope.

Since you have this assignment in your controller definition

$scope.jobname = myService.get();

If you run this controller before the user make a click it will be empty. it wont be refreshed in every click.

edited Jan 2, 2017 at 21:41

answered Jan 2, 2017 at 20:26

Manu Obre

2,3041 gold badge14 silver badges12 bronze badges

7 Comments

user2185457 Over a year ago

by doing this, it gives output as "{}"

Manu Obre Over a year ago

That is because data object is empty. What are you trying to save in there?

user2185457 Over a year ago

I am trying to save the jobtitle, please refer the HTML code of page 1 above, where the value is Winter. I want to store that value on ng-click and pass it on to the 2nd controller on page 2 and display at jobname binding

Manu Obre Over a year ago

Yo have a few things missing then. Do you want it to be an input? or just a static value?

user2185457 Over a year ago

Just a static value

|

Collectives™ on Stack Overflow

Angular returns [object Object]

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related