Unable to use retrieved JSON object in Angular.js

Question

This is my first project on angular. I have created a directive. I am not able to insert the value which I am fetching from an object served by a RESTful API. The object as shown in the console is like this,

enter image description here

Below are the necessary files,

knob.js(directive)

angular.module('knob', [])

.directive('knob', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.knob({
                fgColor: attrs.fgColor
            });
        }
    }
})

dashboard.js(controller)

myApp.controller('DashController', function($scope, $http, $cookies, $cookieStore) {

    $http({
        url: site + '/company/dashboard',
        method: "GET",
        transformRequest: encodeurl,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).success(function(data) {
        console.log(data); //data has the object that i want to use
        $scope.dash = data.count;
    }).error(function(res) {
        console.log(res);
    });

});

dahboard.html(view)

<li>
    <div class="knob_contain">
      <h4 class="knobs_title">Deals Left This Month</h4>
      <input type="text" value="{{dash.profile}}" knob class="dial dialIndex">
    </div>
</li>

I want the count.profile value to be bound to input type where I am using my knob. I will give you more files if you need.

<input type="text" ng-model="dash.profile" knob class="dial dialIndex"> — Kalhan
– Kalhan, Commented Jan 21, 2015 at 8:45
I am really sorry. It was my mistake. After asking this question. I removed the $scope.dash... stuff from my code to do something else. Thank you for your answer. Works. Can you make it an answer so that I may except it? I would also love to give a property of data-readonly= "true". I would appreciate if you can add that in your answer as well. Upvoted. — Thomas Sebastian
– Thomas Sebastian, Commented Jan 21, 2015 at 9:07

Kalhan · Accepted Answer · 2015-01-21 09:08:29Z

1

The better way is assign a model to text box like,

 <input type="text" ng-model="dash.profile" knob class="dial dialIndex">

edited Jan 21, 2015 at 9:08

answered Jan 21, 2015 at 8:42

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

Comments

Anil Singh · Accepted Answer · 2015-01-21 09:04:32Z

You can change your code look like

AngulaJs code

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

app.service('yourService', function ($http) {
    this.getUser = function () {
        return $http({ url: site + '/company/dashboard',
            method: "GET",
            transformRequest: encodeurl,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
    })
     .success(function(data) {
        console.log(data); //data has the object that i want to use
        $scope.dash = data;
    }).error(function(res) {
        console.log(res);
    });
    };
});

app.controller('DashController', function($scope, $http, $cookies, $cookieStore, yourService) {
  $scope.dash =null;

    yourService.getUser().then(function (resp) {   
        if (resp.data !== undefined) {           
             console.log(data); //data has the object that i want to use
             $scope.dash = data.count;
        }
      })
      .error(function(res){
           console.log(res);
      });
}); 

app.directive('knob', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.knob({
                fgColor: attrs.fgColor
            });
        }
    }
});

HTML code sample

< li>
    <div class="knob_contain">
      <h4 class="knobs_title">Deals Left This Month</h4>
      <input type="text" value="{{dash.profile}}" knob class="dial dialIndex">
    </div>
</li>

Welcome @ThomasSebastian. I already faced this kind of issue in my current app.

adib.mosharrof · Accepted Answer · 2015-01-21 09:05:34Z

1

You need to make a small change in your dashboard.html page.

For input elements, the ng-model property sets the value of the input box. For details see the docs on input[text]

So instead of using

<input type="text" value="{{dash.profile}}" knob class="dial dialIndex">

use

<input type="text" ng-model="dash.profile" knob class="dial dialIndex">

answered Jan 21, 2015 at 9:05

adib.mosharrof

1,6441 gold badge12 silver badges17 bronze badges

1 Comment

Thomas Sebastian Over a year ago

Ya I had missed this. Corrected. Thanks.

Collectives™ on Stack Overflow

Unable to use retrieved JSON object in Angular.js

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related