Solo tengo experiencia básica en AngularJS.

Aquí hay un script AngularJS que autocompleta un cuadro de texto de una lista dada de países. Pero lo necesito para leer datos de un archivo Json local.

Me confundí totalmente porque mi archivo Json contiene objetos Json anidados. Cuando busco 'AAL o Aalb' en el cuadro de texto, necesito ver AAL-AALBORG como aparece en la lista.

¿Alguien puede explicarme brevemente cómo hacerlo?

<script>
    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope) {
        $scope.countryList = ["USA", "UK", "INDIA","KOREA"];
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country) {
                if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0)
                {
                    output.push(country);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });
</script>

HTML es,

<div ng-app="myapp" ng-controller="usercontroller">
            <label>Enter a country</label>
            <input type="text" name="country" id="country" ng-model="country" ng-keyup="complete(country)" class="form-control"/>
        <ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
            <li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-click="fillTextbox(countrydata)" >{{countrydata}}</li>
        </ul>
        </div>

El formato Json anidado es:

{"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}}
0
Amjadh Nm 31 oct. 2017 a las 11:45

4 respuestas

La mejor respuesta
Final Script as per suggestions, Thanks all :



    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope,$http) {
        $http.get('js/airport.json').then(
            function (response) {
                $scope.countryList = response.data;
            })
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country, code) {
                if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0)) {
                    output.push(code + "-" + country.city);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });
0
Amjadh Nm 31 oct. 2017 a las 12:38

Asumiendo:

$scope.countryList = {"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}};

Prueba esto:

angular.forEach($scope.countryList, function (country, code) {
            if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0))
            {
                output.push(code +"-" +country.city);
            }
        });
0
Sneha Chari 31 oct. 2017 a las 10:33

Al iniciar su componente, complete una matriz de datos con estos datos, cuando el usuario escriba la entrada, obtenga el valor usando keyup, por ejemplo. Si su AutocompleteData existe && su longitud> 0, puede mostrar una tabla debajo de su entrada.

Para filtrar, usaría algo como:

filter(company: Airline){ 
    this.companyTable.filter((company) => {
      return company.name.toLowerCase().indexOf(valueFilter.toLowerCase()) >= 0 
});

Donde empresa es una empresa de su tabla de empresa y valor Filtre la palabra en la entrada (puede acceder usando DOM / ElementRef, consulte el documento)

0
andrea06590 31 oct. 2017 a las 14:03

Puede usar el servicio $ http.

$http.get('path_to_your_json_file').then(

 function success(data){
    $scope.myArray = data;
}

)

0
Kenany 31 oct. 2017 a las 09:52