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

Question

我是新来反应并尝试在我的网页中实现 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>
    )
}
}

}

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

Answer 1

这里你需要的是递归。

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

例如，我们定义如果value给定的akey 是一个字符串，那么我们将把它渲染到页面上。

这种情况看起来像这样：

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

然后，根据此决定，您可以编写一个函数，该函数将采用数据对象并递归地遍历该对象的键，根据上面的条件，它将返回value 或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在这里用它来构建一个新数组。如上所述，我将把 thekey或以 作为新数据对象的函数递归调用的结果推送到新数组value，当然基于上面提到的条件。
请注意，递归调用将返回一个数组，因此我使用扩展语法来提取它的成员。

现在，我们希望将key和value渲染到DOM.
因此，我们可以推送一个元素，而不是仅仅推送keyor value。

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

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

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;
}