Typeahead fetch data from url json value not working

Question

Below is my HTML code for angular typeahead:

<div class="form-group">
 <select name="" class="form-control" ng-model="city" ng-change="onChange(e)" id="city">
    <option value="DELHI">DELHI</option>
    <option value="BANGALORE">BANGALORE</option>
    <option value="GOA">GOA</option>
    <option value="KOLKATA">KOLKATA</option>
    <option value="PUNJAB">PUNJAB</option>
 </select>
</div>

<input type="search" name="" ng-model="bankName" typeahead='bank_name as bankName | filter:$viewValue | limitTo:8'  id="input" class="form-control" value="" placeholder="Search" required="required" title="">

<table class="table table-hover">
    <thead>
        <tr>
            <th>IFSC</th>
            <th>BANK ID</th>
            <th>BANK NAME</th>
            <th>BRANCH</th>
            <th>ADDRESS</th>
            <th>CITY</th>
            <th>DISTRICT</th>
            <th>STATE</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="service in services">
            <td>{{service.ifsc}}</td>
            <td>{{service.bank_id}}</td>
            <td>{{service.bank_name}}</td>
            <td>{{service.branch}}</td>
            <td>{{service.address}}</td>
            <td>{{service.city}}</td>
            <td>{{service.district}}</td>
            <td>{{service.state}}</td>
        </tr>
    </tbody>
</table>

Below is JS File:

var app = angular.module('bankBranch', ['ui.bootstrap'])


.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http){
    $scope.bankUrl = "https://someweb.com/api/bank_branches?offset=0&limit=50&city=";
    $scope.city = 'BANGALORE';
    var bankName = '$scope.bank_name';  
    var cities = '$scope.city';
    $scope.getdata = function(){
        $http.get($scope.bankUrl+$scope.city).then(function(response){
            $scope.services = response.data;
        });
    }

    $scope.onChange = function(e){
        $scope.getdata();
    }
    $scope.getdata();
}]);

The problem is I am trying to fetch the branch name in the input field and as I type the below table data should get filtered according to that. The onChange function is working for select box. The JSON format of the api url is as follows:

[{
"ifsc": "asdads",
"bank_id": 110,
"bank_name": "abc bank",
"branch": "BANGALORE",
"address": "ewrwerewr",
"city": "BANGALORE",
"district": "BANGALORE URBAN",
"state": "KARNATAKA"
}]

Any Idea how to modify this? Getting stuck. Please help me.

@zmbq you edited my code do you know what's wrong with my code? — Preety Singh
– Preety Singh, Commented Sep 24, 2016 at 18:32
Are you using typeahead from AngularJS UI Bootstrap here? If so you need to change typeahead to uib-typeahead in your search input tag — segFault
– segFault, Commented Sep 24, 2016 at 18:53

Pankaj Parkar · Accepted Answer · 2016-09-24 20:08:36Z

2

You have mistaken while using typeahead directive, the way it works is, it will need a promise object on which you will apply $viewValue filter

<input type="search" name="" ng-model="bankName" 
   typeahead='bank_name for bankName in getdata()'
   id="input" class="form-control" value="" 
   placeholder="Search" required="required" title=""/>

So lets change your $scope.getData function to return promise object from it.

$scope.getdata = function(){
    return $http.get($scope.bankUrl+$scope.city).then(function(response){
        $scope.services = response.data;
        return $scope.services;
    });
}

$scope.onChange = function(e){
    return $scope.getdata();
}

Note: If you are using Angular ui-bootstrap version 1.X+ then you have to use uib- prefix before each ui-bootstrap directive like in your case it would be uib-typeahead instead of typeahead.

edited Sep 24, 2016 at 20:08

answered Sep 24, 2016 at 18:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Preety Singh Over a year ago

I am using this <script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/…>

Pankaj Parkar Over a year ago

@PreetySingh you have to use uib-typeahead then. :)

Preety Singh Over a year ago

error in console :( Argument 'ServicesCtrl' is not a function, got string

Pankaj Parkar Over a year ago

Are you sure you have referred JS file on html page?

Pankaj Parkar Over a year ago

Check if you have mistakenly remove some your JS reference, open browser console "Sources" tab & check does your desired file has been loaded or not?

|

Collectives™ on Stack Overflow

Typeahead fetch data from url json value not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related