React: How to convert JSON Object to Array and render it?

Question

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?

Dupocas · Accepted Answer · 2019-07-12 14:10:15Z

9

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)

answered Jul 12, 2019 at 14:10

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

4 Comments

Kobe Over a year ago

You should use map here - it does exactly what you want, but on one line. (Kennen is best :P)

Dupocas Over a year ago

Actually this is one of maany solutions

Rima Paškevičiūtė Over a year ago

Seems to be working! But is it a correct way to use it like this?: <li>{arr[2].value}</li>

Dupocas Over a year ago

I can't see why not

The Witness · Accepted Answer · 2019-07-12 14:12:26Z

4

You can use Object.keys method.

Object.keys(champ).map(
   (key) => champ[key]
);

or entries to get array of tuples [key, value]:

Object.entries(champ).map(
    ([key, value]) => ({ [key]: value })
);

answered Jul 12, 2019 at 14:12

The Witness

9207 silver badges12 bronze badges

Comments

Kobe · Accepted Answer · 2019-07-12 14:37:52Z

You can simply use Object.entries:

const 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: ["Tank", "Fighter"], title: "the Exemplar of Demacia" }

const obj = Object.entries(champObject)

obj.forEach(([key, value]) => console.log(key, value))

You could optionally map it to an object for a more readable return object:

const 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: ["Tank", "Fighter"], title: "the Exemplar of Demacia" }

const obj = Object.entries(champObject).map(([key, value]) => ({key, value}))

console.log(obj)

Collectives™ on Stack Overflow

React: How to convert JSON Object to Array and render it?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related