javascript - 如何将对象映射到ui？

Question

目前我有一些格式的数据

data : {
  full_name: 'John Doe',
  date_of_birth: '01-01-1990'
}

我想以表格格式呈现它，看起来像

Full Name : John Doe
Date Of Birth: 01-01-1990

如果它是一个数组，我可以做类似的事情

data.map((item) => <h1>item</h1>

但我还需要打印 key 。
如何在类似函数的单个循环中实现这样的功能？我可以在数组的情况下使用 map，但我还需要渲染对象的关键部分。
注意:无法更改数据对象。

Answer 1

您可以映射条目数组，如下所示:

Object.entries(data).map((entry, index) => (
    <div key={index}>{entry[0]}: {entry[1]}</div>
));

Object.entries函数创建一个数组 [key, value]来自函数条目的数组。
此外，您可以使用一个函数来转换来自 snake_case 的 key 。为可读格式。这是一个执行此转换的单行函数:

   const snakeToText = (str) => str.split('_').map((word) => word[0].toUpperCase() + word.substring(1)).join(' ');