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

}

P.S我正在使用带有map函数的getValues来检索第一级键和值，因为你在generateElement（）下提供的语法给了我错误。

Answer 1

这里你需要的是递归。

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

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

这种情况看起来像这样：

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来构建一个新数组。并且如上所述，我将推送新数组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>

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

1 个答案: