Parsing Json Array in AngularJS

Question

Iam newbie in angularjs.How to display the json in html using angularjs.Below is the code

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
    $http.get("http://localhost:8080/xyz").then(function (response) {

    });
});

Reponse is :

[
  {
    "city": "animal"
  },
  {
    "city": "bird"
  }
]

pgrodrigues · Accepted Answer · 2016-06-21 10:47:46Z

2

In your controller you should assign your json to a scope:

app.controller('myctrl', function($scope, $http) {
    $scope.myArray = [];
    $http.get("http://localhost:8080/xyz").then(function (response) {
        $scope.myArray = response;
    });
});

Then in your view, you can do something like:

<div ng-controller="myctrl">
    <ul ng-repeat="obj in myArray">
        <li>{{obj.city}}</li>
    </ul>
</div>

answered Jun 21, 2016 at 10:47

pgrodrigues

2,0781 gold badge25 silver badges30 bronze badges

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

Comments

Durgpal Singh · Accepted Answer · 2016-06-21 10:49:31Z

1

use ng-repeat like this.

<div ng-repeat="t in test">
  <span>{{t.city}}</span>
</div>

plunker here

answered Jun 21, 2016 at 10:49

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

1 Comment

Teja Over a year ago

In Plunker its displaying,but in my page its not displaying.I checked the JSON link twice its giving the reponse.But data is not displaying

Ajay · Accepted Answer · 2016-06-21 10:56:18Z

0

Use the following code this might help you.

myArray = JSON.parse(response);

for ( var index in myArray ) {

var singleObject = myArray[index];
var keys = Object.keys[singleObject];
      for ( var j in keys ) {
            console.log("Value of key"+j+"is"+keys[j]+"in Object"+index);
      }
}

Here response is a string value.

answered Jun 21, 2016 at 10:56

Ajay

5,0013 gold badges28 silver badges39 bronze badges

Comments

upendra · Accepted Answer · 2017-06-19 09:19:30Z

Try this Where Records is like this..

{"records":[{"ID":"235","user_id":"2","project_id":"186","project_cid":"2900669120142632939","imagePath":"media/pano/sv_02a29.jpg","ImageName":"1.jpg"},{"ID":"236","user_id":"2","project_id":"186","project_cid":"2900669120142632939","imagePath":"media/pano/sv_f0f59.jpg","ImageName":"253.jpg"},{"ID":"239","user_id":"2","project_id":"186","project_cid":"1997319193267363957","imagePath":"media/pano/sv_6536f.jpg","ImageName":"PANOCLOUD_meta.jpg"},{"ID":"240","user_id":"2","project_id":"186","project_cid":"6736594884768838469","imagePath":"media/pano/sv_898ca.jpg","ImageName":"Boscolo Hotel Budapest.jpg"}]}



$http.get("moderatorData.php").then(function (response) {
                $scope.panoramas = response.data.records;
            });

Then print using like this

<li class="align" ng-repeat="pano in panoramas>
<img ng-src="{{pano.imagePath}}"  style="height: 90px;" />
</li>

Collectives™ on Stack Overflow

Parsing Json Array in AngularJS

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related