Formerly we discuss about how to insert data in database using Struts2 and AngularJS. Now we’ll see how to implement Struts2 AngularJS read operation full example which is equally important for developer point of view.

Lets discuss in details :

In my opinion, you must read insert data article for better understanding because i clearly explain the whole code.

Lets start with UI part:

<div class="container" ng-app="myApp" ng-controller="productsCtrl">
    <div class="row">
        <div class="col s12">
            <h4>Products</h4>
            
          
            
            <!-- used for searching the current list -->
<input type="text" ng-model="search" class="form-control" placeholder="Search product..." />
 
<!-- table that shows product record list -->
<table class="hoverable bordered">
 
    <thead>
        <tr>
            <th class="text-align-center">ID</th>
            <th class="width-30-pct">Name</th>
            <th class="width-30-pct">Description</th>
            <th class="text-align-center">Price</th>
            <th class="text-align-center">Action</th>
        </tr>
    </thead>
 
    <tbody ng-init="getAll()">
        <tr ng-repeat="d in names | filter:search">
            <td class="text-align-center">{{ d.id }}</td>
            <td>{{ d.name }}</td>
            <td>{{ d.description }}</td>
            <td class="text-align-center">{{ d.price }}</td>
            <td>
                <a ng-click="readOne(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">edit</i>Edit</a>
                <a ng-click="deleteProduct(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">delete</i>Delete</a>
            </td>
        </tr>
    </tbody>
</table>
            
            
             
        </div> <!-- end col s12 -->
    </div> <!-- end row -->
</div> <!-- end container -->

Explanation of above code:

Here we create a search box and show list of data fetch from database.

1. Line 9: It is normal textfield with ng-model=”search” and used for searching the current list.
2. Line 24: We used ng-init with getAll() function and the ngInit directive allows you to evaluate an expression in the current scope. That means function getAll() will be initiated when page read that table. Implementation of that function will be discuss below.
3. Line 25: ng-repeat is like a loop for AngularJS and this directive instantiates a template once per item from a collection. Like foreach loop in Java getAll() function return the set of data in names. We just put the value of names in another variable named d. You can use many filters with AngularJS by using single pipeline(|). Here we use filter:search and search is the model name of our search textfield.  Now we can search by typing in text field.
4. Line 27-29: You’ll see double curly braces({{}}) notation to bind expressions to elements is built-in AngularJS markup. You’ll read the JSON file which return by function getAll() and put all data in d. So we’ll read name by {{ d.name }} and so on.

Now lets move on JS part where our all implementation will be held:

    // read products
$scope.getAll = function(){
    $http.get("readproducts.action").success(function(response){
        $scope.names = response.records;
    });
}

 What was in above code?

Here you can see that firstly we define function getAll() and then call post function on $http directive with readproducts.action which generate all data in JSON format. All we’ll discuss the implementation of that Action class below. Then after when success response get we put all response in names by using $scope directive so we can access names anywhere in our application.

Now map readproducts.action with struts.xml:

<!-- Fetch all products -->  
     <action name="readproducts" class="co.tellmehow.json.ProductAction" method="readAllProducts">
           <result type="json" />
     </action>

 Now add method readAllProducts in ProductAction class:

private List<Product> records = new ArrayList<Product>();
  private static Product pd = new Product();
  
  
   public List<Product> getRecords() {
      return records;
    }

    public void setRecords(List<Product> records) {
      this.records = records;
    }
    
    
    
  
  
  
  public String readAllProducts()
  {
    List<Product> ps   = ProductDB.selectAll();
     
    for(Product p : ps)
    {
      
      pd.setName(p.getName());
      pd.setId(p.getId());
      pd.setDescription(p.getDescription());
      pd.setPrice(p.getPrice());
      
      records.add(p);
    }
    return Action.SUCCESS;
  }

 From above code you’ll get JSON like:

{"records":[{"description":"dd","id":1,"name":"GeekOnJava","price":123},{"description":"asdf","id":2,"name":"TellMeHow","price":123},]}

Finally, you complete the tutorial how to fetch data from database in AngularJS using Struts2.

Hope you like this article and if you’ve any queries, problem or suggestion please let me know in comment section.