显示来自 JSON 的 KEY 值答案

【问题标题】：Displaying KEY values from JSON显示来自 JSON 的 KEY 值
【发布时间】：2018-08-28 05:04:30
【问题描述】：

我正在尝试在响应中显示我的 JSON 响应中的键值。所以像这样的 fieldData {DMR_5_why_who_test: "test", why: test}。我希望能够显示粗体值或键值。目前我的代码如下所示。但它会吐回 [Object, Object] 而不是我的键值

  dotesting = () => {
    const j = Object.values(this.state.data);
    var journalEntries = [];

      for (var i = 0; i < j.length; i++){
        journalEntries.push(
          <div>
          <h3>{j[i].fieldData.toString()}</h3>

          </div>);

      }
      console.log(<div>{journalEntries}</div>)
     return(<div>{journalEntries}</div>);


  }

【问题讨论】：

使用 Object.keys 代替
我会在哪里使用 object.keys？作为声明的一部分？数据来自 API
Object.values 会为您提供对象的值列表，而不是 Object.keys，它会为您提供对象上的键列表
试试<h3>{Object.keys(j[i].fieldData).join(', ')}</h3>

标签： javascript arrays node.js reactjs npm

【解决方案1】：

JSX 指示返回一个引用 journalEntries 的 div，它是一个对象，所以它正在做你要求它做的事情。

相反，您可以使用 Object.keys 映射对象的键并返回值。通过这种方式，您告诉 JSX 打印每个值与整个 Array 对象。

旁注：我会使用 Array.map 静态方法而不是 for 循环，因为它本质上是声明性的，并且任何声明性/功能性都更符合 React 的习惯。

const someData = {
 best: 'cats',
 secondBest: 'dogs'
}

const getData = () => Object.keys(someData).map((item, index) => {
  return someData[item];
})

const App = () => (
  <div>
    {getData()}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

由于您在谈论fieldData，因此您需要使用其上的Object.keys 来提取密钥，然后显示这些密钥。

dotesting = () => {
    const j = Object.values(this.state.data);
    var journalEntries = [];

    for (var i = 0; i < j.length; i++){
      const keys = Object.keys(j[i].fieldData);
      journalEntries.push(
         <div>
            <h3>{keys.join(', ')}</h3>
         </div>);
    }
    console.log(<div>{journalEntries}</div>)

    return(<div>{journalEntries}</div>);
}

【讨论】：

【解决方案3】：

只需使用Object.keys。

dotesting = () => {
    const j = Object.keys(this.state.data);
    var journalEntries = [];

      for (var i = 0; i < j.length; i++){
        journalEntries.push(
          <div>
          <h3>{j[i].fieldData.toString()}</h3>

          </div>);

      }
      console.log(<div>{journalEntries}</div>)
     return(<div>{journalEntries}</div>);
  }

或者，您可以使用Object.keys(this.state.data).map() 进行迭代：

dotesting = () => {
    const journalEntries = Object.keys(this.state.data).map(el =>
        <div>
          <h3>{el.fieldData.toString()}</h3>
        </div> 
    )
    return(<div>{journalEntries}</div>);
  }

【讨论】：

为什么我们要这样迭代呢？ for (var i = 0; i < j.length; i++) -- 你可以使用j.forEach 甚至更好，j.map 这里
当然，更新了我的答案。

【解决方案4】：

要访问对象的键，记录 Object.keys() 而不是 Oject.values

“Object.keys() 方法返回一个给定对象自身...属性的数组，其顺序与 for...in 提供的顺序相同”

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

【讨论】：