laço foreach em angularjs
forEach loop em AngularJS. Há poucos pontos que não compreendi.
- para que serve a função iteradora? Há alguma maneira de passar sem ele?
- Qual é o significado da chave e do valor como 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 meujson:
[
{
"Name": "Thomas",
"Password": "thomasTheKing"
},
{
"Name": "Linda",
"Password": "lindatheQueen"
}
]
o meu ficheiro JavaScript:
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 questão: Por que a função acima não entra se a condição e imprimir "nome de usuário é thomas" no console?
4 answers
var values = {name: 'misko', gender: 'male'};
Se o seu objecto para iterar é um array( também possível), como este:
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
Para cada um destes object, ele irá então levá-los um por um e executar um código específico para cada valor. Este código é chamado a função iterator . forEach é inteligente e se comportar de forma diferente se você estiver usando um array de uma coleção. Aqui está um 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
Então a chave é o valor de cadeia de caracteres da sua chave e o valor é ... valor. Você pode usar a chave para acessar seu valor assim : obj['name'] = 'John'
Se desta vez você mostrar um array, como este:
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]
Então o valor é o teu objecto (colecção), e a chave é o índice da sua lista desde:
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
1: { "Name" : "Linda", "Password" : "lindatheQueen" }}
Depuração do seu código
O problema parece vir do facto de ser um pedido assíncrono.Você envia uma consulta sobre o seu filho, depois quando o navegador terminar de descarregá-lo, execute o sucesso. mas logo após enviar o seu solicite a sua realização de um loop usando angular.forEach sem esperar a resposta do seu JSON.
Tens de incluir o laço 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");
});
});
});
Indo mais profundamente
A API de$http é baseada na APIs deferida / promise exposta pela $q servico. Enquanto para padrões de uso simples isso não importa muito, para utilização avançada é importante familiarizar-se com estas APIs e as garantias eles fornecem.
Você pode dar uma olhada em APIs deferred / promise , é um conceito importante de Angular para fazer ações assíncronas suaves.
Tens de usar angulares aninhados.lacetes de forEach para JSON como 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);
});
});
O angular.forEach() vai iterar através do seu objecto json.
Primeira iteração,
Chave = 0, Valor = {"nome": "Thomas", "senha": "thomasteking"}
Segunda iteração,
Chave = 1, Valor = {"nome": "Linda", "password": "lindatheQueen"}
Para obter o valor do seu name, pode utilizar value.name ou value["name"]. O mesmo acontece com o seu password, você usa value.password ou value["password"].
O código abaixo dar-lhe-á o que você quer:
angular.forEach(json, function (value, key)
{
//console.log(key);
//console.log(value);
if (value.password == "thomasTheKing") {
console.log("username is thomas");
}
});
Muda a linha para este
angular.forEach(values, function(value, key){
console.log(key + ': ' + value);
});
angular.forEach(values, function(value, key){
console.log(key + ': ' + value.Name);
});