I have a big local JSON file containing League of Legends champions information. I want to output random champion data (name, title, etc...). For that I'm converting it to Object and then to Array so that I could use it with map(). The issue is that when I convert it from Object to Array, I lose property names which in my mind isn't right.
Object example with all property names as in JSON file
champObject:
id: "jarvaniv"
key: "59"
name: "Jarvan IV"
sprite: {url: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/sprite/champion1.png", x: 96, y: 48}
stats: {hp: 571.2, hpperlevel: 90, mp: 302.2, mpperlevel: 40, movespeed: 340, …}
tags: (2) ["Tank", "Fighter"]
title: "the Exemplar of Demacia"
__proto__: Object
Converted to Array example. Please note absence of property names
champData: Array(9)
0: "jarvaniv"
1: "59"
2: "Jarvan IV"
3: "the Exemplar of Demacia"
4: (2) ["Tank", "Fighter"]
5: {hp: 571.2, hpperlevel: 90, mp: 302.2, mpperlevel: 40, movespeed: 340, …}
6: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/champion/JarvanIV.png"
7: {url: "http://ddragon.leagueoflegends.com/cdn/8.11.1/img/sprite/champion1.png", x: 96, y: 48}
8: "Prince Jarvan, scion of the Lightshield dynasty, is heir apparent to the throne of Demacia. Raised to be a paragon of his nation's greatest virtues, he is forced to balance the heavy expectations placed upon him with his own desire to fight on the front..."
length: 9
__proto__: Array(0)
This is how I used it in my MainPage.js. As you can see I expect to have exact property names as in my JSON file so that I could output some specific data of my choice.
import ChampionsData from '../data/champions.json'
class MainPage extends React.Component {
render(){
const keys = Object.keys(ChampionsData)
const randomKey = Math.floor(Math.random() * keys.length)
const champObject = ChampionsData[randomKey]
const champData = Object.values(champObject);
return(
<div>
{champData.map((value, index) => {
return <div key={index}>
<ul>
<li>{value.name}</li>
<li>{value.title}</li>
</ul>
</div>
})}
</div>
)
}
}
export default MainPage
How do I need to approach this, so that I wouldn't lose actual property names?
const arr = []
Object.keys(MyObject).forEach(key => arr.push({name: key, value: MyObject[key]}))
Then access like this:
console.log(arr[0].name, arr[0].value) //id, jarvaniv (I prefer Zac)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With