CODEWITHSUNDEEP
jsonangularjshttpget
Mike Anderson
Mike Anderson

Reputation: 597

Access JSON Object Prop - Angular JS

First time using Angular JS, I'm using $http.get to return a Json object. When I output the response data, I can see entire JSON object in the console, but I can't access the object or properties. What am I missing here?

    $scope.init = function (value) {
        $scope.productEditorModel.productId = value;
        $scope.loadData($scope.productEditorModel.productId);
    }

    $scope.loadData = function (productId) {
        var responsePromise = $http.get("/Product/GetProductModel", {
            params: { productId: productId }
        });

        responsePromise.success(function (dataFromServer, status, headers, config) {
            console.log(dataFromServer.DataModel);

          });
    };

When I first output the dataFromServer to the console, the object is null and then it becomes populated. Since it's an async call, I should be able to access and set whatever vars inside the success

I would like to be able to directly access the object and property names IE:

    $scope.productModel.productId = dataFromServer.Data.productId

My json looks like this:

  Object{DataModel:Object, IsSuccess: false}

Thanks!

Upvotes: 1

Views: 1492

Answers (1)

tpie
tpie

Reputation: 6221

The problem is that you are trying to access the data before it comes back. Here is a plunker that demonstrates how to set it up, and how not to.

  //predefine our object that we want to stick our data into
  $scope.myDataObject = {
    productId: 'nothing yet',
    name: 'nothing yet'
  }

  //get the data, and when we have it, assign it to our object, then the DOM will automatically update
  $http.get('test.json')
  .success(function(data) {
    $scope.myDataObject = data
  });

  var y = $http.get('test.json')
  //this throws an error because I am trying to access the productId property of the promise object, which doesn't exist.
  console.log(y.productId);

Here is the demo

Upvotes: 1

Related Questions