在不知道对象键的情况下访问对象值

Question

我确实完成了我的 reactjs 教程并开始制作一个将数据存储在 json 中的 webapp。我能够从 json 数据中找到我的对象，并且该对象将代表如下内容：

var data={
    name:<h1>Ram</h1>,
    description:<p>I want to be a Developer</p>,
    contact:<ul><li>66546464/li><li>66546464/li></ul>,
    DOB:<h4>23.05.2017</h4>
    }

我需要以这种方式显示，但不使用像

这样的键

   {data.name or data.DOB}.

输出应该是这样的：

   <div>
       <h1>Ram</h1>
       <p>I want to be a Developer</p>
        <ul><li>66546464/li><li>66546464/li></ul>
        <h4>23.05.2017</h4>
    </div>

是否可以在不知道键的情况下显示值？如果是这样，请帮帮我吗？

随时欢迎批评！

Answer 1

您必须遍历对象的键并将其值附加为父 div 的子项。请考虑以下代码：

<div>
  {Object.keys(data).map(key => data[key])}
</div>

Object.keys 将为您提供对象的键，map 函数以数组格式返回键的所有值。如上代码所示，可以用 React JSX 编写。

Answer 2

这是在 react.js 中的操作方法

<div>
  {Object.keys(data).map(key) => (
    <span key={key}>
      {data[key]}
    </span>
  )}
</div>

解释。 Object.keys 从您的对象中获取所有键，您映射它们并为每个返回一个 <span> (note the key)，并在每个跨度内通过其键从数据中获取值

Answer 3

在没有 HTML 标签的情况下存储数据更有意义（使用标签存储是不好的做法，许多框架/库会尝试解析您的特殊字符并导致您在路上遇到麻烦） 然后，您可以使用键访问视图中的原始数据。

<h1>{data.name}</h1> <p>{data.description}</p> 等等

如果您坚决反对使用密钥，您可能会发现这个关于漂亮打印 JSON 数据的线程会有所帮助：

Pretty Printing JSON with React