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"
  }
]

Answer 1

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>

Answer 2

use ng-repeat like this.

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

plunker here

Answer 3

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.

Answer 4

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>