CODEWITHSUNDEEP
angularjs
DragonBorn
DragonBorn

Reputation: 1809

How to use ng-repeat on this JSON data

I am trying to call hotel_name using ng-repeat. How do I do it.

This is the code. But nothing is being displayed.

<div ng-repeat="x in hotels">
    <p ng-repeat="y in x.data">{{y.hotel_name}}</p>
</div>

This is the data format. 

{
status: 200,
message: "Packages Found",
data: [
  {
    hotel_id: "40",
    company_id: "2",
    user_id: "17",
    hotel_name: "Zen International",
    hotel_description: "Good Hotel"
  }
]
}

Upvotes: 1

Views: 43

Answers (3)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Your hotels seems an object. You don't need to iterate it.

Convert this 

<div ng-repeat="x in hotels">
    <p ng-repeat="y in x.data">{{y.hotel_name}}</p>
</div>

to this

<div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>

Upvotes: 2

Faraz Babakhel
Faraz Babakhel

Reputation: 664

Bind Datalist with $scope in controller like

    angular.module('YourApp', [])
.controller('YourCtrl', function($scope) {

    $scope.dataList={
    status: 200,
    message: "Packages Found",
    data: [
      {
        hotel_id: "40",
        company_id: "2",
        user_id: "17",
        hotel_name: "Zen International",
        hotel_description: "Good Hotel"
      }
    ]
    }    

});

and bind dataListwith view like

<div ng-app="YourApp" ng-controller="YourCtrl">
    <div>
        <p ng-repeat="item in dataList.data">{{item.hotel_name}}</p>
    </div>
</div>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222720

You can us one ng-repeat

<div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>

DEMO

var demoApp = angular.module('demoApp', []);
 var controllers = {};
 controllers.SimpleController = function ($scope) {
  $scope.hotels = {
status: 200,
message: "Packages Found",
data: [
  {
    hotel_id: "40",
    company_id: "2",
    user_id: "17",
    hotel_name: "Zen International",
    hotel_description: "Good Hotel"
  }
]
};
};
demoApp.controller(controllers);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
 <div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>
</div>

Upvotes: 2

Related Questions