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
– niclas_4, Commented Feb 8, 2019 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
– briosheje, Commented Feb 8, 2019 at 12:05
Possible duplicate of How do I loop through or enumerate a JavaScript object? — enricog
– enricog, Commented Feb 8, 2019 at 12:06

Callam · Accepted Answer · 2019-02-08 12:23:52Z

3

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 8, 2019 at 12:23

answered Feb 8, 2019 at 12:05

Callam

11.5k2 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

nicholaswmin Over a year ago

Minor note: You loose the first-level keys this way.

Callam Over a year ago

First level keys seem to be in the nested data

Callam Over a year ago

The link in OPs question – ddragon.leagueoflegends.com/cdn/9.2.1/data/en_US/champion.json

Callam Over a year ago

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.

niclas_4 Over a year ago

@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.

|

briosheje · Accepted Answer · 2019-02-08 12:07:01Z

1

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.

answered Feb 8, 2019 at 12:07

briosheje

7,4662 gold badges35 silver badges56 bronze badges

Comments

dporechny · Accepted Answer · 2019-02-08 12:09:31Z

1

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)
  })

answered Feb 8, 2019 at 12:09

dporechny

6465 silver badges12 bronze badges

Comments

nicholaswmin · Accepted Answer · 2019-02-08 12:10:19Z

0

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)

answered Feb 8, 2019 at 12:10

nicholaswmin

23.2k16 gold badges102 silver badges175 bronze badges

Comments

baao · Accepted Answer · 2019-02-08 12:09:19Z

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>

Collectives™ on Stack Overflow

Convert a JSON Response into an Array of Objects

5 Answers 5

11 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

Comments

Comments

Comments

Comments

Linked

Related