Mapping over array with deep nested json object

Question

this is my first post and was extremely confused on how to map over the json data correctly.

The problem comes from when you map the user address property with Object.keys, everything is mapping over fine until it gets to the "geo" property values. What is the solution to map and render over every property easier?

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>

Welcome to Stack Overflow! The way SO works, your whole question (including any necessary code) has to be in your question, not just linked. Two reasons: People shouldn't have to go off-site to help you; and links rot, making the question and its answers useless to people in the future. Please put a minimal reproducible example in the question. More: How do I ask a good question? and Something in my web site or project doesn't work. Can I just paste a link to it? — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2020 at 19:00
When doing an minimal reproducible example for a React question, it's great to use Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2020 at 19:01
Okay much appreciated! Will keep be more mindful in my future posts. — ReactDummy
– ReactDummy, Commented Feb 27, 2020 at 19:05
user.address[key] will eventually return the geo object, and React doesn't render objects by itself. — Emile Bergeron
– Emile Bergeron, Commented Feb 27, 2020 at 19:14
^ I already know this. Please be more constructive next time — ReactDummy
– ReactDummy, Commented Feb 27, 2020 at 19:23

Junius L · Accepted Answer · 2020-02-27 19:27:33Z

1

Use object keys on geo, in your li check if key is equal to geo, then map over it.

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

edited Feb 27, 2020 at 19:27

answered Feb 27, 2020 at 19:19

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ReactDummy Over a year ago

Thank you!!! Ive been searching for hours for a case of this but could never find the correct syntax!!

Junius L Over a year ago

@ReactDummy please see stackoverflow.com/help/someone-answers

Sushmit Sagar · Accepted Answer · 2020-02-27 19:28:28Z

0

Just add an if statement for geo key and return your desired JSX.

{
  Object.keys(user.address).map(key => {
    if (key === "geo") {
      Object.keys(user.address[key]).map(geoKey => {
        return (
          <li>
            {geoKey} {user.address[key][geoKey]}
          </li>
        );
      });
    } else {
      return (
        <li>
          {key} {user.address[key]}
        </li>
      );
    }
  });
}

edited Feb 27, 2020 at 19:28

answered Feb 27, 2020 at 19:23

Sushmit Sagar

1,5283 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Mapping over array with deep nested json object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related