Convert a JSON Response into an Array of Objects

Question

I checked tons of SO Questions about this but I wasn´t able to solve it for my case. So I make a get call from an API:

axios.get("https://ddragon.leagueoflegends.com/cdn/9.2.1/data/en_US/champion.json").then(response => {

    console.log(response.data)
    response.data.forEach(entry => {

    }) 
})

the response.data has what I want but in weird format like

XXX: { ... }, KKK: { ... }, JJJ: {...}

But I need it as a simple Array of Objects.

the response.data.forEach is also undefined for some reason

@briosheje No it has the data I need but in the format mentioned above — niclas_4, Feb 08 '19 at 12:03
Then it's an object, not an array. `.forEach` is an **Array** prototype, **not** an object one. If you want to loop that response, you need to do something like this: `Object.keys(response.data).forEach(k => console.log(response.data[k]))` — briosheje, Feb 08 '19 at 12:05
Possible duplicate of [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — enricog, Feb 08 '19 at 12:06

Callam · Accepted Answer · 2019-02-08T12:23:52.560

2

Looks like you just need the values of the dictionary, however, you need to not only access the data of the response, but the 'data' of the actual response data itself.

const data = Object.values(response.data['data']);

edited Feb 08 '19 at 12:23

answered Feb 08 '19 at 12:05

Callam

11,409
2
34
32

Minor note: You loose the first-level keys this way. – nicholaswmin Feb 08 '19 at 12:06
First level keys seem to be in the nested data – Callam Feb 08 '19 at 12:12
How do you know that? The OP doesn't indicate they are. – nicholaswmin Feb 08 '19 at 12:13
2

The link in OPs question – https://ddragon.leagueoflegends.com/cdn/9.2.1/data/en_US/champion.json – Callam Feb 08 '19 at 12:14
Hey thanks so far, but in the forEach If i try to console log the entry I still get the weird format of `key: {....}` instead of just `{}` – niclas_4 Feb 08 '19 at 12:16
What do you get when you `console.log(Object.values(response.data)[0])`? – Callam Feb 08 '19 at 12:19
@Callam `champion` – niclas_4 Feb 08 '19 at 12:21
aaand `console.log(Object.values(response.data['data'])[0])`? – Callam Feb 08 '19 at 12:22
@Callam then I get the first entry of the data object – niclas_4 Feb 08 '19 at 12:24
1

Well there's your answer, we were thinking the `response.data` was the data containing each 'champion'. You need to use `response.data['data']` / `response.data.data` instead. – Callam Feb 08 '19 at 12:25
1

@Callam Thank you now it works, usually im not that stupid in terms of JS but never had todo with JSON yet, will defenetly read myself into it for the future. – niclas_4 Feb 08 '19 at 12:30

score 1 · Answer 2 · answered Feb 08 '19 at 12:07

For accessing key-level as well:

Object.keys(response.data).forEach(k => {
   console.log('key is', k);
   console.log('value is', response.data[k]);
});

About why it was not working: you're trying to loop over an object. However, regular javascript objects do not have a forEach prototype, while arrays does.

score 1 · Answer 3 · answered Feb 08 '19 at 12:09

fetch("https://ddragon.leagueoflegends.com/cdn/9.2.1/data/en_US/champion.json")
  .then(response => response.json())
  .then(({ data }) => {
    const result = [];
    Object.keys(data).forEach(key => {
      result.push(data[key])
    })
    console.log(result)
  })

score 0 · Answer 4 · answered Feb 08 '19 at 12:10

Another one that converts the object to an Array while preserving the key names.

FWIW I doubt you wanna go this route, but it's a way to turn your Object to an Array whilst keeping the key names.

const res = {XXX: { foo: 'bar' }, KKK: {foo: 'bar' } }
const arr = Object.keys(res).map(key => ({ ...res[key], key }))

console.log(arr)

score -1 · Answer 5 · answered Feb 08 '19 at 12:09

Since it's an object that gets returned, use Object.entries

Object.entries(response.data).forEach(([k, v]) => console.log(k,v));

<script>
const response = {
type: "champion",
format: "standAloneComplex",
version: "9.2.1",
data: {
Aatrox: {
version: "9.2.1",
id: "Aatrox",
key: "266",
name: "Aatrox",
title: "the Darkin Blade",
blurb: "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
info: {
attack: 8,
defense: 4,
magic: 3,
difficulty: 4
},
image: {
full: "Aatrox.png",
sprite: "champion0.png",
group: "champion",
x: 0,
y: 0,
w: 48,
h: 48
},
tags: [
"Fighter",
"Tank"
],
partype: "Blood Well",
stats: {
hp: 580,
hpperlevel: 80,
mp: 0,
mpperlevel: 0,
movespeed: 345,
armor: 33,
armorperlevel: 3.25,
spellblock: 32.1,
spellblockperlevel: 1.25,
attackrange: 175,
hpregen: 5,
hpregenperlevel: 0.25,
mpregen: 0,
mpregenperlevel: 0,
crit: 0,
critperlevel: 0,
attackdamage: 60,
attackdamageperlevel: 5,
attackspeedperlevel: 2.5,
attackspeed: 0.651
}
},
Ahri: {
version: "9.2.1",
id: "Ahri",
key: "103",
name: "Ahri",
title: "the Nine-Tailed Fox",
blurb: "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
info: {
attack: 3,
defense: 4,
magic: 8,
difficulty: 5
},
image: {
full: "Ahri.png",
sprite: "champion0.png",
group: "champion",
x: 48,
y: 0,
w: 48,
h: 48
},
tags: [
"Mage",
"Assassin"
],
partype: "Mana",
stats: {
hp: 526,
hpperlevel: 92,
mp: 418,
mpperlevel: 25,
movespeed: 330,
armor: 20.88,
armorperlevel: 3.5,
spellblock: 30,
spellblockperlevel: 0.5,
attackrange: 550,
hpregen: 6.5,
hpregenperlevel: 0.6,
mpregen: 8,
mpregenperlevel: 0.8,
crit: 0,
critperlevel: 0,
attackdamage: 53.04,
attackdamageperlevel: 3,
attackspeedperlevel: 2,
attackspeed: 0.668
}
},
Akali: {
version: "9.2.1",
id: "Akali",
key: "84",
name: "Akali",
title: "the Rogue Assassin",
blurb: "Abandoning the Kinkou Order and her title of the Fist of Shadow, Akali now strikes alone, ready to be the deadly weapon her people need. Though she holds onto all she learned from her master Shen, she has pledged to defend Ionia from its enemies, one...",
info: {
attack: 5,
defense: 3,
magic: 8,
difficulty: 7
},
image: {
full: "Akali.png",
sprite: "champion0.png",
group: "champion",
x: 96,
y: 0,
w: 48,
h: 48
},
tags: [
"Assassin"
],
partype: "Energy",
stats: {
hp: 550,
hpperlevel: 85,
mp: 200,
mpperlevel: 0,
movespeed: 345,
armor: 23,
armorperlevel: 3.5,
spellblock: 32.1,
spellblockperlevel: 1.25,
attackrange: 125,
hpregen: 3.5,
hpregenperlevel: 0.5,
mpregen: 50,
mpregenperlevel: 0,
crit: 0,
critperlevel: 0,
attackdamage: 62.4,
attackdamageperlevel: 3.3,
attackspeedperlevel: 3.2,
attackspeed: 0.625
}
},


}}
</script>

Convert a JSON Response into an Array of Objects

5 Answers5