Access JSON Object Prop - Angular JS

Question

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!

I'm getting this back when I log the dataFromServer......Object{DataModel:Object, IsSuccess: false} Post is updated — Mike Anderson
– Mike Anderson, Commented May 24, 2015 at 15:36
First time I log dataFromServer.DataModel it is null, second time it is an object with props like this: Object{ProductId:1,Title:"Product Name"} etc...but when I try to access a prop by name for example dataFromServer.DataModel.Title, I get this error: Cannot read property 'Title' of undefined — Mike Anderson
– Mike Anderson, Commented May 24, 2015 at 15:49
Where in your code are you trying to access it? You have to wait until the data is populated before you try to access it because otherwise there is nothing but a promise object there — tpie
– tpie, Commented May 24, 2015 at 15:57

tpie · Accepted Answer · 2015-05-24 16:04:20Z

1

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

answered May 24, 2015 at 16:04

tpie

6,2393 gold badges24 silver badges41 bronze badges

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

5 Comments

Mike Anderson Over a year ago

I'll try that out, thanks! I didn't realize I had to mock up an empty data object to bind to.

tpie Over a year ago

well...you don't HAVE to...but it won't behave very nicely.

Mike Anderson Over a year ago

Makes good sense :) I made this plunker using the empty data object, but I'm still getting that undefined error, what I am missing, gotta be something stupid plnkr.co/edit/zlUsTHcjFV6sOWvPFlVK?p=preview

tpie Over a year ago

plnkr.co/edit/G922Eda7Z9nxZVDsca4A?p=preview A few things - you don't need that Array prefix. Format your json correctly (no semi-colons in a json file). The primary issue though was you weren't accessing your data at the right property. Wrap your returned json data in angular.json(dataFromServer), but it has to be purely JSON or it will throw an error (you should probably run this through a try/catch block)

Mike Anderson Over a year ago

Perfect thanks, after adding the try/catch, the undefined error went away. I did reformat the JSON as suggested, but the JSON object still comes back as undefined the first time around...so the try catch handles it well.

Collectives™ on Stack Overflow

Access JSON Object Prop - Angular JS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related