Display array value with multiple objects

Question

I need to display the values in my UsersData array, same as array numbers, but I can not do that in ReactJS.

Here's an example available in CodeSandbox.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const usersData = [
    {
      total: 3,
      data: [
        { id: 1, name: "Tania", username: "floppydiskette" },
        { id: 2, name: "Craig", username: "siliconeidolon" },
        { id: 3, name: "Ben", username: "benisphere" }
      ]
    }
  ];

  const numbers = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {numbers.map((number, index) => (
        <li key={index}>{number}</li>
      ))}

      {usersData.length > 0 ? (
        usersData.map((data, index) => <div key={index}>Nome: {data.name}</div>)
      ) : (
        <div>No users </div>
      )}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Would be easier if usersData was an object rather than an array: codesandbox.io/s/8zk0n46z90 — Moob
– Moob, Commented Apr 12, 2019 at 8:24

Andy · Accepted Answer · 2019-04-12 08:20:25Z

2

1) usersData is an array containing one element (an object)

2) You need to iterate over the data array of that object and display the value of name property for each its objects.

{usersData[0].data.length > 0 ? (
  usersData[0].data.map((obj, index) => <div key={index}>Nome: {obj.name}</div>)
) : (
  <div>No users </div>
)}

Forked update

answered Apr 12, 2019 at 8:20

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

Comments

Shashin Bhayani · Accepted Answer · 2019-04-12 08:30:24Z

1

Your usersData is an array usersData=[] which contains an object usersData=[{}] which itself contains the array of data usersData=[{data: []}] so you need to change your variable to an object and use the map function on the array of data inside it like so

    const usersData = {
      total: 3,
      data: [
        { id: 1, name: "Tania", username: "floppydiskette" },
        { id: 2, name: "Craig", username: "siliconeidolon" },
        { id: 3, name: "Ben", username: "benisphere" }
      ]
    };

and your loop would become

      {usersData.data.length > 0 ? (
        usersData.data.map((user, index) => <div key={index}>Nome: {user.name}</div>)
      ) : (
        <div>No users </div>
      )}

edited Apr 12, 2019 at 8:30

Shashin Bhayani

1,5763 gold badges19 silver badges38 bronze badges

answered Apr 12, 2019 at 8:24

Bilel BM

214 bronze badges

Comments

dorriz · Accepted Answer · 2019-04-12 08:19:18Z

0

You need to do

  usersData[0].data.map(({name}, index) => <div key={index}>Nome: {name}</div>)

Becaise you are not accessing the data array in your code above

edited Apr 12, 2019 at 8:19

answered Apr 12, 2019 at 8:18

dorriz

2,7693 gold badges15 silver badges19 bronze badges

2 Comments

ApplePearPerson Over a year ago

usersData seems to be an array

willmartinsmg Over a year ago

I've tried this, but when I include the "data" value before the "map" function, it generates an error.

elad · Accepted Answer · 2019-04-12 08:25:11Z

-1

usersData.map((userData, index) => {
     return userData.data.map(item => {
         return <div key={index + item.id}>Nome: {item.name}</div>;
     });
});

answered Apr 12, 2019 at 8:25

elad

19610 bronze badges

1 Comment

Andy Over a year ago

Look at the data structure again.

Collectives™ on Stack Overflow

Display array value with multiple objects

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related