Question

我有一个很大的本地JSON文件，其中包含英雄联盟冠军信息。我想输出随机冠军数据（名称，标题等）。为此，我将其转换为Object，然后转换为Array，以便可以将其与map（）一起使用。问题是，当我将其从Object转换为Array时，会丢失我认为不正确的属性名称。

具有所有属性名称的对象示例，如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

转换为数组示例。请注意缺少属性名称

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)

这就是我在MainPage.js中使用它的方式。如您所见，我希望拥有与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

我该如何处理这个问题，以免丢失实际的财产名称？

Answer 1

const arr = []
Object.keys(MyObject).forEach(key => arr.push({name: key, value: MyObject[key]}))

然后按以下方式访问：

console.log(arr[0].name, arr[0].value) //id, jarvaniv (I prefer Zac)

Answer 2

您可以使用Object.keys方法。

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

或entries以获得元组 [键，值]的数组：

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

Answer 3

您可以简单地使用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))

您可以选择将其映射到一个对象，以获取更具可读性的返回对象：

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)

React：如何将JSON对象转换为数组并进行渲染？

3 个答案: