Table not getting displayed on a button click in AngularJS

Question

Hi I'm learning AngularJS and I have a question. I want to display a table on a button click. On clicking the button, JSON data gets fetched but I have to press the button twice for the data to be displayed.

This is the HTML page.

<html>
  <body>
    <div class="container">
      <label for="tags" style="margin-top: 30px;margin-left: 15px;">GSTIN </label>
      <input id="tags">
        <button ng-click="searchfunction()">search</button>
    </div>
    <br/>
    <hr>
    <div class="container">
      <div ng-show="tshow"  ng-repeat="x in searchdata">
        <table class="table table-bordered table-responsive">
          <thead>
            <tr>
              <th>MON</th>
              <th>SGST</th>
              <th>CGST</th>
              <th>IGST</th>
              <th>CESS</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="i in x">
              <td>{{i.mon}}</td>
              <td>{{i.sgst}}</td>
              <td>{{i.cgst}}</td>
              <td>{{i.igst}}</td>
              <td>{{i.cess}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

This is the controller:

app.controller("searchcontroller", function ($scope,$http) {
  $scope.tshow=false;
  function make_base_auth(user, password) {
    var tok = user + ':' + password;
    var hash = btoa(tok);
    return "Basic " + hash;
  }

  $scope.searchfunction=function() {
    $scope.tshow=true;
    var tf=document.getElementById("tags");
    var value=tf.value;
    var auth = make_base_auth("gstadmn112","Gstn@123");
    var url6 = "http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718";
    xml = new XMLHttpRequest();
    // jQuery
    $.ajax({
      url : url6,
      method : 'GET',
      beforeSend : function(req) {
        req.setRequestHeader('Authorization', auth);
      },
      success:function(response) {
        console.log(response);
        scope.searchdata=response;
      },
      failure:function() {
        window.alert("wrong input data doesn't exist");
      }
    });
  }
});

I need to click twice on the search button for the table to be displayed. I want the table to be hidden initially and once the search is successful the table should be displayed. The table is hidden initially and after clicking twice correct data gets displayed.

Proper indentation is a necessary skill. For one, it will show what is missing in your code -- in this case, for instance a closing `` tag. Start with that. — dda, Jan 01 '18 at 10:33

Marcus Höglund · Answer 1 · 2018-01-01T13:01:07.940

This problem is related to the digest loop of angularjs which keeps all changes sync between your view and controller.

When you invoke the searchfunction(), angularjs will know whats happening inside the method and sync the changes made with the view when its completed. The problem is that your method uses $.ajax which has some async callback methods. When these methods gets invoked angularjs have already left the party (digest loops is over) and don't know what these methods have done to your controller $scope. The jQuery success callback will however set the $scope.searchdata=response; and this change gets notified the next time angularjs is in the party (the next time you click).

So basically you need to make sure angularjs is aware of the async methods which makes changes to your $scope. To solve this I would inject angularjs own $http service (which takes care of async changes to the scope) and use that instead.

var req = {
 method: 'GET',
 url: url6,
 headers: {
   'Authorization': auth
 }
}
$http(req).then(function(response){
    console.log(response);
    $scope.searchdata=response;
}, function(){
    window.alert("wrong input data doesn't exist");
});

$scope is a typo its there in the code tried putting tshow=true in the success function same output theres a ngRoute that routes it to this controller and a particular html — Amey Bhivshet, Jan 01 '18 at 11:26

score 0 · Answer 2 · answered Jan 01 '18 at 12:02

0

Maybe, you try to add $scope.tshow=true; in function success:

success:function(response) {
        console.log(response);
        $scope.tshow=true;
        $scope.searchdata=response;
      },

P.S. I advise to use $http instead of $ajax.

answered Jan 01 '18 at 12:02

Aleksei Korkoza

427
7
22

is it possible to add authentication headers using $http?? – Amey Bhivshet Jan 01 '18 at 12:07
Yes, you may add authentication headers without any problems. Here is example: https://stackoverflow.com/questions/11876777/set-http-header-for-one-request – Aleksei Korkoza Jan 01 '18 at 12:09
one question headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='} the text after basic is the username:password in ascii format right? – Amey Bhivshet Jan 01 '18 at 12:14
I think that yes. Did my answer helped you ? – Aleksei Korkoza Jan 01 '18 at 12:33
no after clicking search no table was getting displayed – Amey Bhivshet Jan 02 '18 at 09:25
Check query and see that response was received from the server. – Aleksei Korkoza Jan 02 '18 at 17:22

score 0 · Answer 3 · answered Jan 01 '18 at 16:47

0

You can use this way.

$scope.searchfunction=function(){
$scope.tshow=true;
var tf=document.getElementById("tags");
var value=tf.value;

$http.get("http://164.100.148.67:8080/wsgstr3B/rest/payment/gstinsearch?gstin="+value+"&year=201718")
.success(function(result) {
     $scope.searchdata=response;
     $scope.tshow=false;
})
.error(function() {
     window.alert("wrong input data doesn't exist");
 });                 
}

answered Jan 01 '18 at 16:47

Ayuktia

431
3
11

I need to add the authentication headers also Using the above method get wont be able to access the link – Amey Bhivshet Jan 02 '18 at 04:14

Table not getting displayed on a button click in AngularJS

3 Answers3