使用深度嵌套的json对象映射到数组

debugcn 发表于 Dev

ReactDummy

这是我的第一篇文章，对于如何正确映射json数据感到非常困惑。

问题出在当您使用Object.keys映射用户地址属性时，一切都在良好的映射，直到到达“ geo”属性值为止。有什么方法可以更轻松地映射和渲染每个属性？

const style = {
  list: {
    listStyle: "none"
  }
};

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[email protected]",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496"
      }
    },
    phone: "1-770-736-8031 x56442",
    website: "hildegard.org",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets"
    }
  }
];

function App() {
  return (
    <div className="App">
      <ul style={style.list}>
        {data.map(user => {
          return (
            <Fragment key={user.id}>
              <li>{user.username}</li>
              <ul style={style.list}>
                {Object.keys(user.address).map(key => {
                  return (
                    <li>
                      {key} {user.address[key]}
                    </li>
                  );
                })}
              </ul>
            </Fragment>
          );
        })}
      </ul>
    </div>
  );
}

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

六月

在geo上使用对象键，li检查键是否与geo相等，然后在其上进行映射。

<li>
   {key} {key === 'geo' ? Object.keys(user.address[key]).map(geo => <i>{user.address[key][geo]}</i>) : user.address[key] }
</li>

// Get a hook function
const {useState} = React;

const style = {
  list: {
    listStyle: "none"
  }
};

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[email protected]",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496"
      }
    },
    phone: "1-770-736-8031 x56442",
    website: "hildegard.org",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets"
    }
  }
];

function App() {
  return (
    <div className="App">
      <ul style={style.list}>
        {data.map(user => {
          return (
            <React.Fragment key={user.id}>
              <li>{user.username}</li>
              <ul style={style.list}>
                {Object.keys(user.address).map(key => {
                  return (
                    <li>
                      {key} {key === 'geo' ? Object.keys(user.address[key]).map(geo => <i>{`${geo}: ${user.address[key][geo]} `}</i>) : user.address[key] }
                    </li>
                  );
                })}
              </ul>
            </React.Fragment>
          );
        })}
      </ul>
    </div>
  );
}


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。