loop foreach em angularjs


110

Eu estava atravessando o forEach loopno AngularJS. Existem alguns pontos que eu não entendi sobre isso.

  1. Qual é o uso da função iteradora? Existe alguma maneira de ir sem ele?
  2. Qual é o significado da chave e do valor conforme mostrado abaixo?

angular.forEach($scope.data, function(value, key){});

PS: Tentei executar esta função sem os argumentos e não funcionou.

Aqui está o meu json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

Meu JavaScriptarquivo:

var app = angular.module('testModule', []);

app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );

   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});

Outra pergunta : Por que a função acima não entra em condição e imprime "nome de usuário é thomas" no console?


6
Porque você não está esperando successque aconteça de sua $http.get(), assim, quando angular.forEach()acontece, $scope.dataainda está indefinido.
Tom,

1
Existe alguma maneira específica de manter a execução do código até que o json seja carregado
Pragam Shrivastava

Mude a linha para angular.forEach (valores, função (valor, chave) {console.log (chave + ':' + valor.Nome);});
Israel Ocbina

Respostas:


208

Perguntas 1 e 2

Então, basicamente, o primeiro parâmetro é o objeto para iterar. Pode ser uma matriz ou um objeto. Se for um objeto como este:

var values = {name: 'misko', gender: 'male'};

Angular pegará cada valor um por um, o primeiro é o nome, o segundo é o gênero.

Se o seu objeto para iterar for uma matriz (também possível), assim:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEach pegará um por um, começando pelo primeiro objeto e, em seguida, pelo segundo objeto.

Para cada um deste objeto, ele os pegará um por um e executará um código específico para cada valor. Esse código é chamado de função iteradora . forEach é inteligente e se comporta de maneira diferente se você estiver usando um array de uma coleção. Aqui está algum exemplo:

var obj = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(obj, function(value, key) {
  console.log(key + ': ' + value);
});
// it will log two iteration like this
// name: misko
// gender: male

Portanto, a chave é o valor da string de sua chave e o valor é ... o valor. Você pode usar a chave para acessar seu valor assim:obj['name'] = 'John'

Se desta vez você exibir uma matriz, como esta:

var values = [{ "Name" : "Thomas", "Password" : "thomasTheKing" },
           { "Name" : "Linda", "Password" : "lindatheQueen" }];
angular.forEach(values, function(value, key){
     console.log(key + ': ' + value);
});
// it will log two iteration like this
// 0: [object Object]
// 1: [object Object]

Portanto, o valor é o seu objeto (coleção) e a chave é o índice da sua matriz desde:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}

Espero que responda a sua pergunta. Aqui está um JSFiddle para executar algum código e testar se você quiser: http://jsfiddle.net/ygahqdge/

Depurando seu código

O problema parece vir do fato de $http.get()ser uma solicitação assíncrona.

Você manda uma consulta sobre seu filho, ENTÃO ao finalizar o navegador e baixá-lo executa com sucesso. MAS logo após enviar sua requisição você executa um loop usando angular.forEachsem esperar a resposta do seu JSON.

Você precisa incluir o loop na função de sucesso

var app = angular.module('testModule', [])
    .controller('testController', ['$scope', '$http', function($scope, $http){
    $http.get('Data/info.json').then(function(data){
         $scope.data = data;

         angular.forEach($scope.data, function(value, key){
         if(value.Password == "thomasTheKing")
           console.log("username is thomas");
         });
    });

});

Isso deve funcionar.

Indo mais fundo

A API $ http é baseada nas APIs adiadas / prometidas expostas pelo serviço $ q. Enquanto para padrões de uso simples isso não importa muito, para uso avançado é importante familiarizar-se com essas APIs e as garantias que elas fornecem.

Você pode dar uma olhada nas APIs deferidas / prometidas ; é um conceito importante do Angular para tornar as ações assíncronas suaves.


2
Colin B (perfil aqui .) Queria comentar isso successe error foi descontinuado . O uso de thenmétodo em vez de successé sugerido. Agora, @Colin, saia e responda algumas perguntas para conseguir 50 repetições! : P
Desenhou em

3
Async não é paralelo. Paralelamente, ele precisará de webworkers, não de promessas. Um pouco pedante, mas vale a pena parar a desinformação sempre que acontecer.
Kyle Baker

1
Obrigado @KyleBaker, eu atualizei esta resposta, você está certo "paralelo" era um abuso de linguagem.
sebastienbarbier

@sebastienbarbier pode me ajudar a resolver este stackoverflow.com/questions/50100381/…
Nikson

7

você deve usar loops angular.forEach aninhados para JSON, conforme mostrado abaixo:

 var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

    angular.forEach(values,function(value,key){
        angular.forEach(value,function(v1,k1){//this is nested angular.forEach loop
            console.log(k1+":"+v1);
        });
    });

1
Não, você usaria um único loop e, francamente, neste caso, você deve apenas usar o forEach () nativo, a la values.forEach(object => console.log($ {object.name}: $ {object.password} )).
Kyle Baker

Basta alterar a linha console.log (tecla + ':' + valor); INTO console.log (chave + ':' + valor.Nome);
Israel Ocbina

5

O angular.forEach()irá iterar através de seu jsonobjeto.

Primeira iteração,

chave = 0, valor = {"nome": "Thomas", "senha": "thomasTheKing"}

Segunda iteração,

chave = 1, valor = {"nome": "Linda", "senha": "lindatheQueen"}

Para obter o valor de seu name, você pode usar value.nameou value["name"]. O mesmo com o seu password, você usa value.passwordou value["password"].

O código a seguir lhe dará o que você deseja:

   angular.forEach(json, function (value, key)
         {
                //console.log(key);
                //console.log(value);
                if (value.password == "thomasTheKing") {
                    console.log("username is thomas");
                }
         });

2

Mude a linha para esta

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value);
 });

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value.Name);
 });

2

No Angular 7, o loop for é como abaixo

var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

for (let item of values)
{
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.