Accessing and Displaying JSON Object with AngularJS

Question

I'm trying to access an object in JSON with AngularJS, and display the values. I have done this when I create an array in JSON but this time I want to show an example with an object. This is my code:

My JSON File

{ "user": {
"Name":"Ben", 
"City":"New York"}}

My angular app

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

    app.controller('jsonObjectExample', function($scope, $http) {
      $http.get("jsonobject.json").then(function (response) {
          $scope.myData = response.data.user;
      });
    });

My HTML

<body>
    <div ng-app="myApp" ng-controller="jsonObjectExample"> 
      <ul>
        <li ng-repeat="x in myData">
          {{ x.Name + ', ' + x.City }}
        </li>
      </ul>
    </div>
  </body>

Here is a link to these files on plunker: https://plnkr.co/edit/uBRf99AjYH9zX0WuHsW3?p=preview

Can someone explain where I'm going wrong? Thanks.

Check the updated plunkr plnkr.co/edit/a2czVDmeW0asDS7p5COk?p=preview — CrazyMac
– CrazyMac, Commented May 3, 2017 at 4:51
Doesn't that make it into an array instead of an object? I want to access an object just as an example. — user3305894
– user3305894, Commented May 3, 2017 at 4:59
The response you are getting from jsonobject.json is an object and not an array. Hence you have to access an object this way in your HTML. If the response is an array then you can use ng-repeat for iteration — CrazyMac
– CrazyMac, Commented May 3, 2017 at 5:06

Sachila Ranawaka · Accepted Answer · 2017-05-03 04:47:22Z

1

remove the ng-repeat. myData is object, not an array so no need to use the ng-repeat

  <body>
    <div ng-app="myApp" ng-controller="jsonObjectExample"> 
      <ul>
        <li >
          {{ myData.Name + ', ' + myData.City }}
        </li>
      </ul>
    </div>
  </body>

Demo

answered May 3, 2017 at 4:47

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

Sachila Ranawaka Over a year ago

@user3305894 no prob make sure to check as answer if this helped

sujeet kumar srivastava · Accepted Answer · 2017-05-03 05:02:43Z

1

If you are using ng-repeat make sure the json which you are parsing should give some array value.

you can correct your json like:

{ "user": [{
"Name":"Ben", 
"City":"New York"}]}

Other codes are working fine. Please check this

answered May 3, 2017 at 5:02

sujeet kumar srivastava

1825 bronze badges

Collectives™ on Stack Overflow

Accessing and Displaying JSON Object with AngularJS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related