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?