javascript - 如何在 React.js 中获取 JSON 对象的键和值

Question

我是新来的 react 者，并试图在我的网页中实现 JSON 对象的所有键和值。我有一个下面的 JSON 结构。我希望所有键和值都打印在我的网页中，其中键应打印为标签。

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4":{
       "k1": "val1",
        "k2": {
        "p1": "v1",
        "p2": "v2",
        "p3": "v3"
            }
          }
        }

我编写了以下代码来获取此 JSON 的键和值。

getValues() {
        let arr = [];
        arr = Object.keys(this.props.myArr).map(key =>
            <div key={this.props.data[key]} className="row">
                <div className="col-xs-6">{key}</div>
                <div className="col-xs-6">{this.props.myArr[key]}
                </div>
            </div>

        )
        return arr;
    }
render() {
    return (
        <div>
            <Header />
            <div className="content">
                {this.getValues()}
            </div>
        </div>
    )
}

props.myArr 拥有整个对象。

我能够打印键和值，但不能打印 key4(p1,p2,p3) 下的嵌套对象。我希望在我的网页中一个接一个地打印所有键及其值。谁能告诉我哪里出错了，以及如何访问 JSON 对象的所有键(作为标签)和值。

已编辑-

const myObj = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": {
    "k1": "val1",
    "k2": {
      "p1": "v1",
      "p2": "v2",
      "p3": "v3"
    }
  }
}


class Details extends React.component{
constructor(){
  this.getValues = this.getValues.bind(this);
}
getValues() {
        let arr = [];
        arr = Object.keys(myObj).map(key =>
            <div key={myObj[key]} className="row">
                <div className="col-xs-6">{key}</div>
                <div className="col-xs-6">{myObj[key]}
                </div>
            </div>

        )
        return arr;
    }

generateData(myObj) {

        const newData = Object.keys(myObj).reduce((result, currentKey) => {
          if (typeof myObj[currentKey] === 'string' || myObj[currentKey] instanceof String) {
            const elementToPush = getValues(currentKey, myObj[currentKey]);
            result.push(elementToPush);
          } else {
            const nested = generateData(myObj[currentKey]);
            result.push(...nested);
          }
          return result;
        }, []);
        return newData;
      }

render() {
    return (
        <div>
            <Header />
            <div className="content">
                {this.generateData(myObj)}
            </div>
        </div>
    )
}
}

P.S 我正在使用 getValues 和 map 函数来检索第一级键和值，因为您在 generateElement() 下提供的语法给我错误。

Answer 1

这里你需要的是递归。

虽然，您的设计中缺少一些东西，但您没有定义程序何时实际提取值的确切条件。

例如，我们定义如果给定key 的value 是 字符串，那么我们将把它呈现到页面。

这样的条件看起来像这样:

if (typeof data[key] === 'string' || data[key] instanceof String)

然后根据这个决定，您可以编写一个函数，该函数将获取一个数据对象并递归地遍历该对象的键，根据上述条件，它将返回值 或者 使用 value 作为新数据对象对同一函数的另一个调用。

这个函数看起来像这段代码:

function generateData(data) {
  const newData = Object.keys(data).reduce((result, currentKey) => {
    if (typeof data[currentKey] === 'string' || data[currentKey] instanceof String) {
      result.push(currentKey);
    } else {
      const nested = generateData(data[currentKey]);
      result.push(...nested);
    }
    return result;
  }, []);
  return newData;
}

我正在使用 .reduce在这里建立一个新的阵列。如上所述，我会将 key 或使用 value 作为新数据对象递归调用函数的结果推送到新数组，当然基于上述条件。
请注意，递归调用将返回一个数组，所以我使用的是 spread syntax提取它的成员。

现在，我们希望我们的 key 和 value 呈现到 DOM。
因此，我们可以推送一个元素，而不是仅仅推送 key 或 value。

这是一个完整的运行示例:

const myData = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": {
    "k1": "val1",
    "k2": {
      "p1": "v1",
      "p2": "v2",
      "p3": "v3"
    }
  }
}

const generateElement = (key,value) => {
  return (
    <div key={key} className="row">
      <div className="col-xs-6 ins-label">{key}</div>
      <div className="col-xs-6">{value}</div>
    </div>
  );
}

function generateData(data) {
  const newData = Object.keys(data).reduce((result, currentKey) => {
    if (typeof data[currentKey] === 'string' || data[currentKey] instanceof String) {
      const elementToPush = generateElement(currentKey, data[currentKey]);
      result.push(elementToPush);
    } else {
      const nested = generateData(data[currentKey]);
      result.push(...nested);
    }
    return result;
  }, []);
  return newData;
}

class App extends React.Component {
  render() {
  const { data } = this.props;
    return (
      <div>
        {generateData(data)}        
      </div>
    )
  }
}

ReactDOM.render(<App data={myData} />, document.getElementById('root'));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>