skip to Main Content

I am trying to map a nested object in React. This is how my object currently looks like

  "data": {
    "user1": {
      "Public": [
        1,
        0
      ],
      "Team Only": [
        1,
        1
      ],
      "All": [
        1,
        1
      ]
    },
    "user2": {
      "Public": [
        0,
        0
      ],
      "Team Only": [
        0,
        0
      ],
      "All": [
        0,
        0
      ]
    },

The way I am trying to map it is like this

    const TableRows = (obj) => {
        const userObject = Object.entries(obj);
        const row = userObject.map((owner, mainIndex)=> {
          return (
            <TableRow key={console.log(`row-record-${owner[1]}`)} highlightOnHover={true}>
              {Object.entries(owner[1]).map((value, index) => (
                <TableCell
                  key={console.log(`column-value-${value}`)}
                  alignmentHorizontal={
                    tabsAlignment[props.metricComponent] &&
                    props.componentName != "Open_COE_Default"
                      ? tabsAlignment[props.metricComponent][index]
                      : index != 0
                        ? "center"
                        : ""
                  }
                >
                 {owner[1]} // This prints out user1, 11,11 expected is user1, 1, 1

                </TableCell>
              ))}
            </TableRow>
          );
        });
        return row;
      };

The issue I am encountering is that when I do run this in the UI, the expected output should be something like

user1, 1, 1
user2, 1, 1

But instead the output turns out like this

user1, 11,11
user2, 22,22

Now I am unsure why it is taking the two separate values for 1 and 1 and then meshing them together. Is the way I am mapping not correct or am I not using the right keys for the map.

2

Answers


  1. The issue in your code seems to be that you’re not accessing the individual elements of the value array correctly when rendering the <TableCell> component. Instead of owner[1] in the <TableCell> component, you should use value[1][0] for the first element and value[1][1] for the second element, like this:

    EDITED CODE

    const TableRows = (obj) => {
      const userObject = Object.entries(obj);
      const row = userObject.map((owner, mainIndex)=> {
        return (
          <TableRow key={console.log(`row-record-${owner[1]}`)} highlightOnHover={true}>
            {Object.entries(owner[1]).map((value, index) => (
              <TableCell
                key={console.log(`column-value-${value}`)}
                alignmentHorizontal={
                  tabsAlignment[props.metricComponent] &&
                  props.componentName != "Open_COE_Default"
                    ? tabsAlignment[props.metricComponent][index]
                    : index != 0
                      ? "center"
                      : ""
                }
              >
                {value[1][0]}, {value[1][1]}
              </TableCell>
            ))}
          </TableRow>
        );
      });
      return row;
    };
    

    This should render the expected output:

    user1, 1, 1
    user2, 0, 0
    

    Note that value[1] is an array with two elements, value[1][0] corresponds to the first element in the array (e.g., 1), and value[1][1] corresponds to the second element in the array (e.g., 0).

    Login or Signup to reply.
  2. try this:

    const TableRows = (obj) => {
        const userObject = Object.entries(obj);
        const row = userObject.map((owner, mainIndex)=> {
            return (
            <TableRow key={console.log(`row-record-${owner[1]}`)} highlightOnHover={true}>
                {Object.entries(owner[1]).map(([value, index]) => (
                <TableCell
                    key={console.log(`column-value-${value}`)}
                    alignmentHorizontal={
                    tabsAlignment[props.metricComponent] &&
                    props.componentName != "Open_COE_Default"
                        ? tabsAlignment[props.metricComponent][index]
                        : index != 0
                        ? "center"
                        : ""
                    }
                >
                    {value}{Object.entries(index).map(([key, val]) => (<>, {val[0]}</>))}
                    
                </TableCell>
                ))}
            </TableRow>
            );
        });
        return row;
    };
    

    expected Output:

    user1, 1, 1, 1
    user2, 0, 0, 0
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search