[英]React: How to convert JSON Object to Array and render it?
I have a big local JSON file containing League of Legends champions information. 我有一个包含League of Legends冠军信息的大型本地JSON文件。 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(). 为此我将它转换为Object然后转换为Array,以便我可以将它与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转换为Array时,我失去了我认为不正确的属性名称。
Object example with all property names as in JSON file 包含JSON文件中所有属性名称的对象示例
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. 这是我在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. 正如您所看到的,我希望在我的JSON文件中具有确切的属性名称,以便我可以输出我选择的某些特定数据。
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)
You can use Object.keys
method. 您可以使用Object.keys
方法。
Object.keys(champ).map(
(key) => champ[key]
);
or entries
to get array of tuples [key, value]: 或entries
以获取元组数组 [键,值]:
Object.entries(champ).map(
([key, value]) => ({ [key]: value })
);
You can simply use Object.entries
: 您可以简单地使用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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.