Iterando através de uma matriz de objetos usando para cada um ou para em

Por favor, como um iterar sobre uma matriz de objeto como usando "para cada" ou "para dentro ou há outra maneira

{
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

Eu preciso que a saída seja cada objeto na matriz Também digamos que eu quero fazer a iteração usando o parâmetro "id". Como eu faço isso

1
adicionado o autor Rajesh, fonte
você pode encontrar sua resposta aqui: - JavaScript "> stackoverflow.com/questions/634654/…
adicionado o autor Parth Raval, fonte
adicionado o autor Just code, fonte

7 Respostas

Você tem um número de opções disponíveis para iterar (loop) através de dados como este. Os métodos mais comuns seriam:

Iteração via Array # forEach() :

data.cards.forEach(function(card) {
  console.log(card);
});

Iteração através de um iterador usando a construção for-of :

for(const card of data.cards) {
  console.log(card);
};

Iteração através de um iterador usando a construção for-in :

for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};

Aqui está um trecho de trabalho mostrando isso em ação:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var data = {
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
};

// Array.forEach method
data.cards.forEach(function(card) {
  console.log(card);
});

// for-of loop
for(const card of data.cards) {
  console.log(card);
};

// for-in loop
for(const key in data.cards) {
  const value = data.cards[key];
  console.log(value);
};
</div> </div>
0
adicionado
Se bem entendi, você deseja iterar através de uma chave , usando a construção de loop for - in - está correto? Acabei de atualizar a resposta para demonstrar que - espero que isso ajude :)
adicionado o autor Dacre Denny, fonte
obrigado, mas digamos que eu queira fazer a iteração usando o parâmetro "id". Como eu faço isso
adicionado o autor Chidexebere, fonte

Tente porCada

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

let k={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}

k.cards.forEach(a=>{
console.log(a.imgSrc)
console.log(a.des)
console.log(a.cardName)
})
</div> </div>
0
adicionado

Existem duas maneiras:

let cards =[
    {
        "des": "Louem ipsum dolou sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur pouta et dolou ac. Moubi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer1.png",
        "id": 1
    },
    {
        "des": "Louem ipsum dolou sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur pouta et dolou ac. Moubi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "tom-jagger.jpg",
        "id": 2
    },
    {
        "des": "Louem ipsum dolou sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur pouta et dolou ac. Moubi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer3.png",
        "id": 3
    }
];

... ...

fou(var i in cards){
    console.log(cards[i]);
}

ou

cards.map(function(each_item, index_key){
    console.log(each_item);
});
0
adicionado

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

let data={
    "cards": [
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer1.png",
            "id": 1
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "tom-jagger.jpg",
            "id": 2
        },
        {
            "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
            "cardName": "Aenean nec sem vestibulum",
            "imgSrc": "Layer3.png",
            "id": 3
        }
    ]
}
function match(data,id){
return data.cards.filter(a=>id==a.id)
}
console.log(match(data,1))
</div> </div>
0
adicionado

Claro - a maneira mais simples é Array. prototype.forEach() :

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

 

const cards = [
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer1.png",
        "id": 1
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "tom-jagger.jpg",
        "id": 2
    },
    {
        "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
        "cardName": "Aenean nec sem vestibulum",
        "imgSrc": "Layer3.png",
        "id": 3
    }
];

cards.forEach(card => console.log(card));
</div> </div>
0
adicionado

Depende se você deseja iterar e retornar ou não.

Você pode fazer o seguinte para modificar a resposta sobre a iteração ou apenas retornar todos os objetos em um loop:

Map: array.map retornará https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map

array.map(item => console.log(item));

Foreach: método executa uma função fornecida uma vez para cada elemento da matriz. https://developer.mozilla.org/ pt-BR/docs/Web/JavaScript/Referência/Global_Objects/Array/forEach

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});
0
adicionado

Além de usar forEach e forIn.You pode usar a função de mapa javascript.Você também pode usar módulos de terceiros, como Lodash, que fornece muitas funções auxiliares úteis. Aqui está o link Documentação de Lodash

var _= require('lodash');
const cards = [
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer1.png",
    "id": 1
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "tom-jagger.jpg",
    "id": 2
  },
  {
    "des": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum",
    "cardName": "Aenean nec sem vestibulum",
    "imgSrc": "Layer3.png",
    "id": 3
  }
]

_.forEach(cards,item => {

  console.log("cards has:",item)
})
0
adicionado
JavaScript Brasil OFICIAL
JavaScript Brasil OFICIAL
4 138 dos participantes

Grupo sobre JavaScript do Brasil