Sunday, 2 April 2017

Display data from Json in Angularjs

Problem :

I'm using the following code, witch includes the app.js, page.html and data.json The app.js seems to work fine, but the view (page.html) isn't display any data..


HTML :

<div ng-controller="tablesController" style="padding-left: 15px">
 <div class="ng-scope">
  <div class="row ng-scope"></div>
 </div>
</div>

<div>
 <md-list flex> <md-list-item class="md-3-line"
  ng-repeat="item in hotelList" ng-click="null"> <img
  ng-src="{{item.hotel_data_node.img_selected.thumb.l}}?{{$index}}"
  class="md-avatar" alt="" />
 <div class="md-list-item-text" layout="column">
  <h3>{{item.hotel_data_node.name}}</h3>
  Rating :
  <h4>{{item.hotel_data_node.extra.gir_data.hotel_rating}}</h4>
 </div>
 </md-list-item> </md-list>
</div>


JSON:
{
    "data": {
        "1061221765445223317": {
            "hotel_geo_node": {
                "name": "Payal Hotel Panvel", 
                "tags": {
                    "property_budget_category": "test"
                }
}
}




JSON:
{
 "data": {
  "1061221765445223317": {
   "hotel_geo_node": {
    "name": "PayalHotelPanvel", 
                                "tags": { "property_budget_category": "test"
   }
  }
 }
}


Solution :

You are missing your view from your controller, you have to include your view into your controller.

i.e 


HTML :

<div ng-controller="tablesController" style="padding-left: 15px">
 <div class="ng-scope">
  <div class="row ng-scope"></div>
 </div>
</div>

//included in CONTROLLER now
<md-list flex> <md-list-item class="md-3-line"
 ng-repeat="item in hotelList" ng-click="null"> <img
 ng-src="{{item.hotel_data_node.img_selected.thumb.l}}?{{$index}}"
 class="md-avatar" alt="" />
<div class="md-list-item-text" layout="column">
 <h3>{{item.hotel_data_node.name}}</h3>
 Rating :
 <h4>{{item.hotel_data_node.extra.gir_data.hotel_rating}}</h4>
</div>
</md-list-item> </md-list>
</div>
</div>



1 comment:

Spring boot with CORS

CORS (Cross-Origin Resource Sharing) errors occur when a web application running in a browser requests a resource from a different domain or...