Javascript React-在表中呈现数据

我有一个对象处于如下状态：

{
"data": {
    "available": {
        "profileOne": {
            "a": 14,
            "b": 14,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileTwo": {
            "a": 13,
            "b": 9,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileThree": {
            "a": 12,
            "b": 12,
            "c": 0,
            "d": 0,
            "e": 14
        },
        "profileFour": {
            "a": 3,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 5
        },
        "profileFive": {
            "a": 6,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 11
        }
    },
    "isFetching": false
}

我需要根据以下提供的示例图像使用数据：

我知道为了能够映射这些，我需要将其转换为一个数组，这正是我所处的位置

---

有人能解决这个问题吗

这是一个让您开始学习的示例。希望这有帮助

const json = {
  data: {
    available: {
      profileOne: {
        a: 14,
        b: 14,
        c: 0,
        d: 0,
        e: 18
      },
      profileTwo: {
        a: 13,
        b: 9,
        c: 0,
        d: 0,
        e: 18
      }
    }
  }
};

const header = ["pro", "a", "b", "c", "d", "e"];
class App extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>{header.map((h, i) => <th key={i}>{h}</th>)}</tr>
        </thead>
        <tbody>
          {Object.keys(json.data.available).map((k, i) => {
            let data = json.data.available[k];
            return (
              <tr key={i}>
                <td>{k}</td>
                <td>{data.a}</td>
                <td>{data.b}</td>
                <td>{data.c}</td>
                <td>{data.d}</td>
                <td>{data.e}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

const json={
数据：{
提供：{
简介一：{
a:14，
b:14，
c:0，
d:0，
e:18
},
概况二：{
a:13，
b:9，
c:0，
d:0，
e:18
}
}
}
};
const header=[“pro”、“a”、“b”、“c”、“d”、“e”]；
类应用程序扩展了React.Component{
render（）{
返回(
{header.map（（h，i）=>{h}）
{Object.keys（json.data.available）.map（（k，i）=>{
让data=json.data.available[k]；
返回(
{k}
{data.a}
{data.b}
{data.c}
{data.d}
{data.e}
);
})}
);
}
}

您需要对数据进行迭代，但由于它是一个对象，您需要对其进行修改以使其能够映射。下面是一个可能的渲染函数：

render(){
    const tableData = data.available
    return 
         (<table>
              <tr>
                  <td>Profile</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                  <td>d</td>
                  <td>e</td>
              </tr>
              {(Object.keys(tableData))
                  .map(key=>({...tableData[key],title:key}))
                  .map(row=>(
                      <tr>

                          {(Object.keys(row))
                               .map(key=>
                                   <td>
                                       {row[key]}
                                   </td>
                               )
                          )}
                      </tr>
                  )
          </table>
}

render（）{
const tableData=data.available
返回
(
轮廓
A.
B
C
D
E
{（Object.keys（tableData））
.map（key=>（{…tableData[key]，title:key}））
.map（行=>(
{（对象.键（行））
.map（键=>
{行[键]}
)
)}
)
}

请注意，如果您可以修改数据源以提供一个数组，那么这将更加简单。对象需要重构才能映射，因此这会使代码更加复杂。

const obj={
“数据”：{
“可用”：{
“概况一”：{
“a”：14，
“b”：14，
“c”：0，
“d”：0，
“e”：18
},
“概况二”：{
“a”：13，
“b”：9，
“c”：0，
“d”：0，
“e”：18
},
“概况三”：{
“a”：12，
“b”：12，
“c”：0，
“d”：0，
“e”：14
},
“概况四”：{
“a”：3，
“b”：3，
“c”：0，
“d”：0，
“e”：5
},
“概况五”：{
“a”：6，
“b”：3，
“c”：0，
“d”：0，
“e”：11
}
},
“isFetching”：false
}}
const entries=Object.entries（obj.data.available）.map（data=>Object.entries（data））
console.log（entries）

和是您的朋友。我的答案和@Kunukn的答案之间可能存在的重复之处是，此答案将通过自动添加列来扩展您的数据。