-1

Would like to get the return object from an HTTP request into another scope object so I can use it in HTML with ng-repeat directive. How can I get the returned object into a variable?

  1. Call HTTP Function
  2. Get Data
  3. Store response
  4. Make scope variable the value of the HTTP response

JS:

angular.module('myApp').controller('ItemController',[
  '$scope', '$http', '$location',
  function($scope, $http, $location){

  var currentLocation = $location.path();

   $scope.getItem = function(){
      $http.get('path/to/json/file.json').then(
        function(response){
          $scope.results = response.data;
          console.log('item controller, item:', $scope.results);
        });

    };

    $scope.item = //MAKE THIS VALUE OF THE RETURN OBJECT FROM getItem
      console.log('scope.item', $scope.item);
    }
]);

JSON

[
  {
    "first_name": "Mega",
    "last_name": "Man",
    "image": "http://placehold.it/75x75"
  }
]

HTML

Would like to be able to just have 

<p>{{item.first_name}}</p>
<p>{{item.last_name}}</p>
<img ng-src="{{item.image}}"/>

Updated JS Call

$scope.getItem = function(){
    $http.get('path/to/json/file.json')
    .success(function(data){
      $scope.results=data;
      console.log('$scope.results: ',$scope.results);
    }).error(function(data){
      console.log(data);
    }).then(
      function(){
        $scope.item = $scope.results;
        console.log('$scope.item: ', $scope.results);
      });
  };
wsfuller
  • 1,810
  • 8
  • 31
  • 49
  • What you are asking for is similar to sending someone to pick up a pizza for you and then expecting it to be on the table before they left the driveway. You'll have to set `$scope.item` within a callback. – Kevin B Nov 11 '16 at 22:25
  • Ok so updated the JS call and running getting data from the `.then()` method with the initial call from the `.success()` method. Now that the date is there how does it get exposed into HTML? – wsfuller Nov 11 '16 at 22:30
  • exactly as you have it iirc. though the .then and $scope.results are redundant. I suspect `data` doesn't have exactly the structure you seem to think it does. – Kevin B Nov 11 '16 at 22:32
  • This is what doesn't make sense. `{{item}}` returns `[{"first_name":"mega",...` but `{{item.first_name}}` returns nothing – wsfuller Nov 11 '16 at 22:35
  • that makes perfect sense. you can't treat an array as if it is an object with key/value pairs and expect it to work. – Kevin B Nov 11 '16 at 22:36
  • Ok, so how to I filter out the array and get results like you would in the `ng-repeat` directive? I get that it's probably redundant what I'm doing but if there is a better way to make the call and expose it to HTML that's what I'm trying to achieve – wsfuller Nov 11 '16 at 22:37
  • well, to get the first item of an array, you would use `theArray[0]`. right? How many items does your array with one item have? – Kevin B Nov 11 '16 at 22:38
  • `$scope.item = $scope.results[0];` that was it, and the reason that it wasn't working earlier is because the callbacks weren't being used correctly – wsfuller Nov 11 '16 at 22:39
  • So .then() is removed and in the success callback just have `$scope.item=data[0];` and then expose to HTML with `{{item.property}}`. Thank you for for that. Side note is do you have any resources to help with promises and callbacks? Still can't wrap my head around them – wsfuller Nov 11 '16 at 22:43
  • 2
    http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 – Kevin B Nov 11 '16 at 22:44
  • Haven't read this before and it looks really helpful thank you – wsfuller Nov 11 '16 at 22:48
  • Don't edit an answer into your question. Just post it as an **actual** Stack Overflow answer. – zero298 Nov 11 '16 at 22:55
  • @zero298 I know, fixing it now – wsfuller Nov 11 '16 at 22:57

2 Answers2

0

You can do it in different ways one way is to use success and error callback functions like:

 $http.get('path/to/json/file.json')
                .success(function (data, status, header, config) {
                  $scope.results =data;
          console.log('item controller, item:', $scope.results);
                })
                .error(function (data, status, header, config) {
                  console.log(data);
                });

Another option is using then promise function like:

 $http({method: 'GET', url: 'path/to/json/file.json').
        then(function(response) {
           $scope.results = response.data;
           console.log('item controller, item:', $scope.results);
        }, function(response) {
          console.log(response);
      });
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
  • Thanks for the response, but I'm still stuck even with changing the call. I need to be able to just say `{{item.name}}` or the like in HTML. The only thing I can do is call the whole object `{{results}}` by your example and return an entire JSON object. I need to be able to call specifics like `{{results.name}}` or `{{results.image}}` – wsfuller Nov 11 '16 at 22:19
  • Just made an edit to my question, hopefully it's a bit more clear now on the expected outcome. Again thanks for the help. – wsfuller Nov 11 '16 at 22:23
0

The issue that was happening what getting callbacks to work correctly. Replaced the .then() method with .success() and .error(). Since the object that was getting called was an array it could not be parsed out in the HTML to get object properties. The other part that was needed was in the success callback to get the first object of the array with $scope.results=data[0] 

$scope.getItem = function(){
  $http.get('path/to/json/file.json')
  .success(function(data){
    $scope.results=data[0];
    console.log('$scope.results: ',$scope.results);
  }).error(function(data){
    console.log(data);
  });
};
wsfuller
  • 1,810
  • 8
  • 31
  • 49
  • Please add some explanation of how this code answers the question. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Nov 11 '16 at 22:52