Traverse array with Indice string

Question

I am trying to traverse an array where the returned index is string (are names). I know how to walk when they come with 0,1,2,3... but with string I’m struggling. The return is as follows:

Aatrox: {version: "10.3.1", id: "Aatrox", key: "266", name: "Aatrox", title: "the Darkin Blade", …}
Ahri: {version: "10.3.1", id: "Ahri", key: "103", name: "Ahri", title: "the Nine-Tailed Fox", …}
Akali: {version: "10.3.1", id: "Akali", key: "84", name: "Akali", …}

// e assim vai 150 linhas mais o menos. 

How can I go one by one and take only the name and the key ? I tried to create this code below, but it does not work.

this.http.get('http://ddragon.leagueoflegends.com/cdn/10.3.1/data/en_US/champion.json').subscribe((resC) => {

    var champions = JSON.parse(resC._body)

    console.log(champions.data) // aqui retorna a lista inteira, mas preciso das keys e names somente. da pra fazer ['Aatrox'], mas como coloca no for pra rodar sozinho sem especificar o nome do campeão? 

    for(const char of champions.data) {
        console.log(char)
    }
});

Answer 1

From what I can see, the feedback you speak of being an Array is actually an object. The structure of an Array and an object are quite different as you see in this example below:

myArray = ["Katarina", "Teemo", "Veigar"] // Array com meus mains <3

// Abaixo é um objeto contendo chaves e valores. Dentro dessas chaves 
// (katarina, teemo e veigar) há outro objetos que contém mais chaves e valores.

myObject = {
    katarina: {skin: "Mercenária", lane: "mid"},
    teemo: {skin: "Coelhinho", lane: "top"},
    veigar: {skin: null, lane: "mid"}
}

Note that unlike an Array, objects are created using keys ({}) and the object items have key and separator value by the two-point sign (:).

When it comes to an object, we should not think about getting a value through an index (position), but through a key. For me to get the value of skin of the object that comes from the attribute katarina for example, I must do the following:

console.log(myObject.katarina.skin); // Imprime "Mercenária"

// É possível também acessar o atributo desta forma (bastante parecido com Arrays mas 
// ao invés de se passar um índice, você deve passar uma chave).

console.log(myObject["katarina"]["skin"]); 

To navigate the keys of a Javascript object using for, we must use the operator in instead of of that serves to traverse each key of the object. See below:

for (let champ in myObject){
    let skin = myObject[champ].skin;
    console.log(`Eu possuo a skin ${skin} para o campeão ${champ}`);
}

The operator of is only used to traverse elements of Arrays, so if you have an Array of objects like the example below, you can traverse it using the of and then use the in to traverse the attributes of each object.

for (const objeto of arrayDeObjetos){
    for (let chave in objeto){
        // Código ...
    }
}