Question 54182 in Javascript Question posted in
A very good W3school tutorial can be found here.

Parsing Through A List/Array In React – Javascript

I have this little snippet of code I’m having a little bit of difficulty figuring out. I have a Java background, and am really new to JavaScript and React in general, so I’m having a little bit of trouble wrapping my head around this. I have this sort of 2D array I am trying to pass to my front-end, and I want to be able to parse through it to display it’s values on a web page, but I don’t know the syntax for it. I’ve tried a few things after looking at some internet resources, but I’m not sure if I’m heading down the right track. Any help or pointers in the right direction would be GREATLY appreciated, sorry if this is a stupid question! Please find the code snippet below, as well as a sample output of the back-end.

 //define variable we want data in
    const [top10Users=[], setTop10Users] = useState();
   
    useEffect(() => {

        const getUsers = async () => {
            try {

                //getting array of top 10 Users (after await)
                const userRank = await userService.getTop10UserPoints();

                console.log(userRank);

                //setting Array of top 10 users
                setTop10Users(userRank);

            } catch (err) {
                console.error(err);
            }
        };

        getUsers();
    }, []);


    const listOfPaticipants = [
//for the sake of space I did not put all 10 participants here, just one, but the full code has this block 10x
        {
            "Name": {top10Users.map(top10Users => <div>{top10Users[0].firstName +" "+top10Users[0].lastName}</div>)},
            "Country": 'U.S.',
            "Points": '38,450',
            "Created": "Jan 2020"
        }
]

and here is the output of console.log(userRank):

0: {firstName: 'Molly', lastName: 'Ferrari', country: 'Canada', occupation: 'STUDENT', …}
1: {firstName: 'Quandale', lastName: 'Dingle', country: 'Canada', occupation: 'STUDENT', …}
2: {firstName: 'Bulbasaur', lastName: 'User', country: 'Croatia (Hrvatska)', occupation: 'ENGINEERING', …}
3: {firstName: 'Ivysaur', lastName: 'User', country: 'American Samoa', occupation: 'UNEMPLOYED', …}
4: {firstName: 'Venusaur', lastName: 'User', country: 'Eritrea', occupation: 'SOFTWARE', …}
5: {firstName: 'Charmander', lastName: 'User', country: 'France Metropolitan', occupation: 'RELIGIOUS', …}
6: {firstName: 'Charmeleon', lastName: 'User', country: 'Bahrain', occupation: 'SOFTWARE', …}
7: {firstName: 'Charizard', lastName: 'User', country: 'Liechtenstein', occupation: 'RELIGIOUS', …}
8: {firstName: 'Squirtle', lastName: 'User', country: 'Mozambique', occupation: 'PSYCHOLOGY', …}
9: {firstName: 'Wartortle', lastName: 'User', country: 'Palau', occupation: 'MEDCINE', …}
Tags:

2

Answers


  1. 0

    The JSX terminology is not quite right

    I think you need parentheses, not "{" "}", in name.

    Try this:

    const listOfPaticipants = [
  {
    "Name": (
      <div>
        {top10Users.map(user => user.firstName + " " + user.lastName)}
      </div>
    ),
    "Country": 'U.S.',
    "Points": '38,450',
    "Created": "Jan 2020"
  }
]

    To select one user

    Don’t map over all of them: just pick one.

    
const iUser = 1;

const listOfPaticipants = [
  {
    "Name": (
      <div>
        {top10Users[iUser].firstName + " " + top10Users[iUser].lastName}
      </div>
    ),
    "Country": 'U.S.',
    "Points": '38,450',
    "Created": "Jan 2020"
  }
]
    Login or Signup to reply.
  2. 0

    you are using correct map function, but you using it wrong

    Syntax for this should be like that:

    {top10Users.map(user => (
    user.firstName
))}

    You need to set a name for your iteration variable, in the above example it is user. And then you do not need to use brackets.

    Also, you should define default value for state differently:

    const [top10Users, setTop10Users] = useState([]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search