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

Posted 2023-02-22

【中文标题】在不知道对象键的情况下访问对象值

【英文标题】：Accessing Object values without knowing the keys of that Objects

【发布时间】：2018-11-28 16:40:38

【问题描述】：

我确实完成了我的 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>

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

随时欢迎批评！

【问题讨论】：

How to get all properties values of a javascript Object (without knowing the keys)?的可能重复

谢谢你的回答！你能给我看一个反应的例子吗？这真的很有帮助@GuillaumeGeorges

【参考方案1】：

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

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

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

【讨论】：

感谢您的帮助！

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

Pretty Printing JSON with React

【讨论】：

感谢您的提醒！我会调查一下@Ryan