javascript - 迭代 JSON 以创建导航

Question

这是我拥有的 JSON，我想通过 pageName 进行迭代以在 li 中构建导航。我尝试使用react。

{
"pname": "Project Name",
"page1": [{
    "pageName": "Home",
    "content": "xyz"
}],

"page2": [{
    "pageName": "About Us",
    "content": "abc"
}]
}

从“./data/data”导入数据； 下面的代码给了我 pname、page1 和 page2，相反，我想要 page1 和 page2 值并且想要忽略 pname。

return (
      <ul className="navbar-nav">
     {
      Object.keys(data).map((value, index) => {
        return (
           <li key={value} className="nav-item active">     
                <a className="nav-link" href="#">{value} <span className="sr-only">(current)</span></a>
           </li> 
        );
      })
      }
)     
      </ul> 

我的尝试 2，返回错误“预期赋值或函数调用，而是看到一个表达式 no-unused-expressions”

return (
      <ul className="navbar-nav">
     {
{
      Object.keys(data).map((value, index) => {
        return (
           <li key={value} className="nav-item active">     
               {value.pageName.map(function (component, i) { 
                <a className="nav-link" href="#">{value.pageName}</a>
              })}
           </li> 
        );
      })
      }
)     
      </ul>           

Answer 1

检查当前键是否包含数组，如果是则显示它。

return (
  <ul className="navbar-nav">
    {Object.keys(data).map(
      (value, index) =>
        Array.isArray(data[value]) && (
          <li key={index} className="nav-item active">
            <a className="nav-link" href="#">
              {data[value][0].pageName}{" "}
              <span className="sr-only">(current)</span>
            </a>
          </li>
        )
    )}
  </ul>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script>

const data = {
  pname: "Project Name",
  page1: [
    {
      pageName: "Home",
      content: "xyz"
    }
  ],

  page2: [
    {
      pageName: "About Us",
      content: "abc"
    }
  ]
};
  
</script>

<script type="text/babel">

class App extends React.Component {
  render() {
    return (
      <div>
        <ul className="navbar-nav">
          {Object.keys(data).map(
            (value, index) =>
              Array.isArray(data[value]) && (
                <li key={index} className="nav-item active">
                  <a className="nav-link" href="#">
                    {data[value][0].pageName}{" "}
                    <span className="sr-only">(current)</span>
                  </a>
                </li>
              )
          )}
        </ul>
      </div>
    );
  }
}

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