Angular data from JSON directly in HTML

Question

If have a straight ahead controller:

controller: function($scope, $http){
$http.get(templateSource+'/object.customer')
   .then(function(result){
      $scope = result.data;            
    });
}

My object.customer file looks like:

[{"customer":{"name":"Bert","email":"[email protected]"}}]

Now I wanted to access the email, so I did (in HTML)

{{customer.email}}

But this is incorrect, so my question is, how to access email?

UPDATE
Setting:

controller: function($scope, $http){
          $http.get(templateSource+'/object.customer')
           .then(function(result){
              $scope.customer = {};
              angular.extend($scope.customer,result.data[0]);
              console.log($scope.customer.email);
            });
        }

Gives me in the console.log unidentified. However, if I set it to console.log($scope.customer); I get:

Object 0: 
  Object customer: 
   Object email: "[email protected]"
          name: "Bert"

The console.log(result.data) is

[Object]
  0: Object
    customer: Object
        email: "[email protected]"
        name: "Bert"

You just overwrote your $scope. You need to do something like $scope.customers = result.data; Also, you are bringing back an array. If you intend to use the first item (after checking th elength), do $scope.customer = result.data[0]; — mitch
– mitch, Commented Feb 7, 2015 at 0:00

levi · Accepted Answer · 2015-02-07 00:35:03Z

1

Use angular.extend

controller: function($scope, $http){
$http.get(templateSource+'/object.customer')
   .then(function(result){

         angular.extend($scope,result.data[0])            
    });
}

Then you can use $scope.customer.email. in you controller or {{customer.email}} in your html.

edited Feb 7, 2015 at 0:35

answered Feb 7, 2015 at 0:02

levi

22.8k7 gold badges79 silver badges76 bronze badges

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

7 Comments

Bob van Luijt Over a year ago

hmm, the output of console.log($scope.customer.email); = undefined

Bob van Luijt Over a year ago

Maybe the update in my post gives a better understanding

levi Over a year ago

@bvl oh you need an extra[0], check my answer. Can you post console.log(result.data) output?

Bob van Luijt Over a year ago

That makes the array empty (console.log = Object {}).

levi Over a year ago

@bvl oh, I got it, you need to apply extend to $scope not to $scope.customer.

|

Collectives™ on Stack Overflow

Angular data from JSON directly in HTML

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related