Skip to main content

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>



Comments

Post a Comment

Popular posts from this blog

Extent report plugin for cucumber framework

Extent Reports  are the most popular  reporting  used with Selenium. ExtentReport API makes our life easy to generate interactive  report  with simple configuartions. It supports almost all Java and .NET test frameworks such as TestNG , JUnit , NUnit etc Here we are discussing about  a plugin which is build on  Extent Report specially for Cucumber. This plugin is used to simple out the implementation of  Extent Report  in  Cucumber Framework .  We are creating a maven project to implement the integration of our plugin with cucumber 1. Create new maven project in any tool eclipse/sts/intellij 2. Open pom.xml and update below entries. Step 1 : Add Cucumber Extent Reporter library to Maven Project Add  cucumber-extentsreport <dependency>      <groupId> com.vimalselvam </groupId>      <artifactId> cucumber-extentsreport </artif...

java: You aren't using a compiler supported by lombok, so lombok will not work and has been disabled.

  In order to make projects compile with the existing builds of Lombok processor, as a workaround you can use the flag -Djps.track.ap.dependencies=false which should be added to File | Settings | Build, Execution, Deployment | Compiler | Build process VM options field. This will disable collection of dependencies specified by an annotation processor when Filer methods are called

javax.servlet.ServletException: Circular view path

Problem : javax.servlet.ServletException: Circular view path [error]: would dispatch back to the current handler URL [/latestOrder] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.) Solution : You've annotated the controller method as producing JSON or String or any other object . You probably want to annotate the method with @ResponseBody and change its return type to allow you to return an object representation of the JSON that you want to include in the response Preview: @RequestMapping (value= "latestOrders" ,method = RequestMethod. GET ) public @ResponseBody List<Order> listProducts(Model model) throws JMSException{ List<Order> list= new ArrayList(); list. add (staff1) return list; }