React - Rendering an array of objects using Map

Question

I'm trying to render an array of objects using Map and so far I've only been able to render the first item to the browser.

I figured something's up with my .map function, but I don't know enough about React and JS to pinpoint the problem.

Here's my App.js file:

// import stuff is here

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };
    this.componentWillMount = this.componentWillMount.bind(this);
  }

  componentWillMount() {
    fetch('THE-JSON-URL-IS-HERE')
    .then(res => res.json())
    .then(data => {
      this.setState({ items: data });
    });

 render() {

const { items } = this.state;

return (
  <div className="App">

    { items.map((item, num) => {
        return (
          <div className="people">

            <div className="elem">
              <p key={num}>{item.elems}</p>   
            </div>     

              <p key={num}><strong>{item.name}</strong></p>
              <p key={num}><small>{item.title}</small></p>             

            <div className="hidden">
              <p key={num}><small>{item.email}</small></p>
              <p key={num}><small><strong>Office: </strong>{item.office}</small></p>
            </div>
            {/* <p>{item.manager}</p> */}
          </div>

        );
    })}        
  </div>
    );
  }
}

export default App;

And here's a sample of the JSON file:

[
  {
    "elems": "Pr",
    "name": "Abby Langdale",
    "title": "President",
    "email": "[email protected]",
    "office": "Javanrud",
    "manager": [
      {
        "elems": "Vp",
        "name": "Johnnie Mouncey",
        "title": "Vice President",
        "email": "[email protected]",
        "office": "Canto",
        "manager": [
          {
            "elems": "Vp",
            "name": "Concordia Burgwyn",
            "title": "VP Quality Control",
            "email": "[email protected]",
            "office": "Zhoukou",
            "manager": [
              {
                "elems": "En",
                "name": "Prissie Sainsberry",
                "title": "Web Developer IV",
                "email": "[email protected]",
                "office": "Tugu",
                "manager": null
              },

etc. Abby's info is all that I've rendered.

You have lots of nested arrays. You either need to recursively flatten this data or use recursive maps. Approach depends also on what output you are expecting with the nested items — charlietfl
– charlietfl, Commented Nov 14, 2018 at 21:24
If the json sample is your "array" data, you're not really looking at rendering an array, but a heirarchy / object graph, and you'd need to some recursion, not the map function, to render that. If that's the case, I recommend revising your title & description for clarity. — Eric H
– Eric H, Commented Nov 14, 2018 at 21:32

Jesse Martin · Accepted Answer · 2018-11-14 21:32:25Z

Since you're nesting arrays and objects into your first array element, the length of items is 1 and the only element is the Abby element with the rest of the data nested inside of it. To map through all of the elements, items should look like this array:

[
  {
    "elems": "Pr",
    "name": "Abby Langdale",
    "title": "President",
    "email": "[email protected]",
    "office": "Javanrud",
    "manager": ""
  },
  {
    "elems": "Vp",
    "name": "Johnnie Mouncey",
    "title": "Vice President",
    "email": "[email protected]",
    "office": "Canto",
    "manager": ""
  },
  {
    "elems": "Vp",
    "name": "Concordia Burgwyn",
    "title": "VP Quality Control",
    "email": "[email protected]",
    "office": "Zhoukou",
    "manager": ""
  },
  {
    "elems": "En",
    "name": "Prissie Sainsberry",
    "title": "Web Developer IV",
    "email": "[email protected]",
    "office": "Tugu",
    "manager": null
  }
]

If you need to maintain the relationship of managers, you can add an id to each object and reference it from another object.

  [
      {
        "elems": "Pr",
        "name": "Abby Langdale",
        "title": "President",
        "email": "[email protected]",
        "office": "Javanrud",
        "manager": "",
        "id" : 1
      },
      {
        "elems": "Vp",
        "name": "Johnnie Mouncey",
        "title": "Vice President",
        "email": "[email protected]",
        "office": "Canto",
        "manager": 1
      },
      ...
]

You would need a filter helper function to do the correct lookup for a manager's name but it should work.

Hey thanks! I flattened the array as per your Option 1 and rendered the data. If I had to maintain the relationship of the managers I would've gone with your Option 2.

Steve Conrad · Accepted Answer · 2018-11-14 21:42:05Z

1

Try flattening the array first. You would need to know the maximum number of levels that the array will have. Once it's flattened, you can use your map function:

const flatItems = items.flat(3);    // flatten up to 3 levels
items.map((item, num) => {
        return ( <render your div> );
}

answered Nov 14, 2018 at 21:42

Steve Conrad

3513 silver badges4 bronze badges

1 Comment

Bodrov Over a year ago

Thanks! I had a feeling that the nested array was part of the problem. I flattened it and was able to render the data.

Collectives™ on Stack Overflow

React - Rendering an array of objects using Map

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related