React map object containing array

Question

I am building an app which fetches the following JSON response:

{
  "result": [
    {
      "id": 6,
      "name": "Test 1",
      "parent": 5
    },
    {
      "id": 17,
      "name": "Test2",
      "parent": 5
    }
  }
}

I would like to map through the result, and display in an unordered list.

App.js:

function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const searchDB = () => {
      fetch("http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35", {
        mode: 'cors',
        credentials: 'include'
      })
        .then(res => res.json())
        .then(
          (json) => {
            setIsLoaded(true);
            setItems(json);
          },
          (error) => {
            setIsLoaded(true);
            setError(error);
          }
        )
    }
    searchDB();
  }, [])

  useEffect(() => {
    console.log(items.result);
  }, [items]);

  return (
    <ul>
      {(Object.entries(items)).map(item => (
        <li key={items.id}>
          {item.id} - {item.name} - {item.parent}
        </li>
      ))}
    </ul>
  );
}

However, the current output shows the map is only running once and displays is as follows:

why don't you use items.results.map(item => (...)) inside return ? — topdev87
– topdev87, Commented Nov 24, 2020 at 9:39

Roy.B · Accepted Answer · 2020-11-24 09:40:15Z

2

You don't need object entries, just do:

 <ul>
  {items.result.map(item => (
    <li key={items.id}>
      {item.id} - {item.name} - {item.parent}
    </li>
  ))}
</ul>

answered Nov 24, 2020 at 9:40

Roy.B

2,10417 silver badges24 bronze badges

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

1 Comment

JSON_Derulo Over a year ago

Thanks for the quick response, really appreciate it

Sarun UK · Accepted Answer · 2020-11-24 09:43:51Z

1

Try this approach,

 items.result.map(({id, name, parent}) => 
       <li key={id}>
          {id} - {name} - {parent}
        </li>)

answered Nov 24, 2020 at 9:43

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Comments

Nsoseka · Accepted Answer · 2020-11-24 17:25:05Z

1

I don't think using map for iteration is a good idea. map is used to iterate and make changes to the array based on its return value. If you simply want to iterate and display items use forEach

Because he interested in the return value in this case a an array of list items `map` is a better fit for this
<ul>
  {items.result.map(item => (
    <li key={items.id}>
      {item.id} - {item.name} - {item.parent}
    </li>
  ))}
</ul>

edited Nov 24, 2020 at 17:25

answered Nov 24, 2020 at 9:48

Nsoseka

3192 silver badges9 bronze badges

8 Comments

Alan Omar Over a year ago

Array.forEach always returns undefined.

Nsoseka Over a year ago

That's right, that is why it's used for iteration purposes. Map is used when you want to create a new array based on the return values during iteration so it is not suitable for this case where he simply wants to iterate and display a list.

Alan Omar Over a year ago

I suggest you read this

Nsoseka Over a year ago

I just did and that article further emphasizes my point. You see in the article that the map method is used in the context of transforming lists and not just for iterating through a list but iterating through it and transforming it.

Nsoseka Over a year ago

Great i get you now, I never thought he needed the result, should have read the question better thanks

|

Itsik Mauyhas · Accepted Answer · 2020-11-24 09:56:28Z

0

You will need to create table body like -

render() {

let tableBody = this.items.map((item, index) => (
        <tr key={index} id="one">
               <td>item.id</td>
               <td>item.name</td>
               <td>item.parent</td>
        </tr>
      ));

//And in the render return -
 return (
                 <table>
                   <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Parent</th>
                        </tr>
                   </thead>
                   <tbody>{tableBody}</tbody>
               </table>

  )

}

answered Nov 24, 2020 at 9:56

Itsik Mauyhas

4,01415 gold badges75 silver badges119 bronze badges

Comments

Ben Allal · Accepted Answer · 2020-11-24 09:41:12Z

-1

{(Object.result.entries(items)).map(item => (
        <li key={items.id}>
          {item.id} - {item.name} - {item.parent}
        </li>
      ))}

answered Nov 24, 2020 at 9:41

Ben Allal

271 silver badge6 bronze badges

Collectives™ on Stack Overflow

React map object containing array

5 Answers 5

1 Comment

Comments

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related