How to read from JavaScript Objects when the property is dynamic?

Question

I have a JavaScript Object which looks something like following:

{
"Finance": [
    {
        "id": 3,
        "first_name": "Test",
        "last_name": "Emp3",
        "email": "[email protected]",
        "department": "Finance",
        "phone": "17894561235",
        "job_title": "Manager",
        "display_name": ""
    }
],
"Account": [
    {
        "id": 4,
        "first_name": "Test",
        "last_name": "Emp4",
        "email": "[email protected]",
        "department": "Account",
        "phone": "14567891236",
        "job_title": "Manager",
        "display_name": ""
    }
],
"HR": [
    {
        "id": 5,
        "first_name": "Test",
        "last_name": "Emp5",
        "email": "[email protected]",
        "department": "HR",
        "phone": "17894556556",
        "job_title": "Manager",
        "display_name": ""
    }
]

} Getting the above data by following function call:

 const [Data, setData] = useState();
 const getdata = async () => {
    setLoading(true);
    let Data = [];
    try {
      let result = await getDATA(
        subscription,
        customer
      );
      let emp = result.data; 
      Data = emp;
      console.log(result.data);
      setData(Data);

    } catch (e) {
      setErrors(true);
      setStatus(
        <>
          <FormattedMessage id="GENERAL.ERROR" />
          <a
            
            target="_blank"
            rel="noopener noreferrer"
          >
            <FormattedMessage id="GENERAL.CONTACT_SUPPORT" />
          </a>
        </>
      );
    }
    setLoading(false);
  }

In the above JavaScript Object I have dynamic Department name which I have no idea what it can be.
My task is to make a Table something like this:

Following is my render:

<Modal.Body>         
        {data ? data.map((e, key) => {
            return (
            <Accordion defaultActiveKey="0">
                <Card className="subscription-manager-expansion-card">
                  <Card.Header className="subscription-manager-expansion-header">
                    <Row>
                        <Col xs={12} sm={3} md={2} lg={1}>
                            <div className="rectangle-172">
                                <ContextAwareToggle  eventKey="0"></ContextAwareToggle>
                            </div>
                        </Col>
                        <Col xs={6} sm={6} md={8} lg={8}>
                            <span classname="subscription-manager-expansion-header-title"> {e} </span>
                        </Col>
                        <Col xs={6} sm={3} md={2} lg={1}>
                            <Form.Check type="checkbox" onChange={checkAddSubscriber} />
                        </Col>
                    </Row>
                  </Card.Header>
                  <Accordion.Collapse eventKey="0">
                    <Card.Body>
                                <div className="widget4" key={e}>
                                <Table>
                                    <thead>
                                        <th className="FinancialModel-title-substring"></th>
                                        <th className="FinancialModel-title-substring"></th>
                                    </thead>
                                    <tbody>
                                        {e ? e.map((es, key) => {
                                        return (
                                                <tr key={es.first_name}>
                                                    <td className="subscription-manager-modal-table-name">{es.first_name + " " + es.last_name} </td>
                                                    <td className="subscription-manager-modal-table"> {es.email}</td>
                                                    <td>
                                                        <Form.Check type="checkbox" checked={isChecked} />
                                                    </td>
                                                </tr>
                                            );
                                        }) : undefined}
                                    </tbody>
                                </Table>
                                </div>
                    </Card.Body>
                  </Accordion.Collapse>
                </Card>
            </Accordion>
            );
        }) : undefined}
        </Modal.Body>

Following is what I am having trouble with:

But for some reason I am getting Uncaught TypeError: Data.map is not a function
Also, how can I read and print the Department Name in the Header (e.g Finance, Account etc.) since it is not known beforehand and it could be any thing.

Please guide me through it.

you would want to use the entries from your object Object.entries(data).map(([departmentName, values]) => { /* stuff here */}) — John Ruddell
– John Ruddell, Commented Jul 28, 2020 at 16:19

Luke Storry · Accepted Answer · 2020-07-28 17:00:27Z

1

You are getting the error Data.map is not a function because on the first render, before you have set the data, Data is undefined.

Change the initialisation to to have a default value of an empty list:

const [data, setData] = useState([]);

As for your second question, you can use Object.entries(), which gives you an array of [key, value] pairs for your object. You can then map over those, like so:

Object.entries(data)
      .map(([departmentName, values]) =>{
       return (<div>
                 <h1>departmentName</h1>
                 <DepartmentComponent info={values} />
               </div>)
       })

answered Jul 28, 2020 at 17:00

Luke Storry

6,7821 gold badge11 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How to read from JavaScript Objects when the property is dynamic?

Following is what I am having trouble with:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Following is what I am having trouble with:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related