How to map dictionary inside array data-CodePudding

I have a problem. I'm interested in a project, but I encountered an error and I can't solve it. I have a data that I pulled from API. There is a dictionary named assignee,project in Data but I cannot access them. Could you help ?

This is my data

[
{
    "id": 1,
    "taskName": "Task 1",
    "startDate": "01-01-2020",
    "endDate": "02-02-2022",
    "assigneeId": 1,
    "assignee": {
        "id": 1,
        "username": "hasanhut",
        "email": "[email protected]",
        "password": "hasan123"
    },
    "projectId": 1,
    "project": {
        "id": 1,
        "name": "Project 1",
        "explanation": "Project 1 Exp",
        "startDate": "01-01-2020",
        "endDate": "02-02-2021"
    },
    "status": "In Progress"
},
{
    "id": 2,
    "taskName": "Task 2",
    "startDate": "03-03-2021",
    "endDate": "04-04-2021",
    "assigneeId": 1,
    "assignee": {
        "id": 1,
        "username": "hasanhut",
        "email": "[email protected]",
        "password": "hasan123"
    },
    "reporterId": 1,
    "reporter": {
        "id": 1,
        "username": "hasanhut",
        "email": "[email protected]",
        "password": "hasan123"
    },
    "projectId": 1,
    "project": {
        "id": 1,
        "name": "Project 1",
        "explanation": "Project 1 Exp",
        "startDate": "01-01-2020",
        "endDate": "02-02-2021"
    },
    "status": "Done"
}

]

And here is a code I tried.

<tbody>
                    {tasks?.map((task) => (
                        <tr
                            key={task.id}
                            className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
                        >
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {task.id}
                            </td>
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {task.taskName}
                            </td>
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {task.startDate}
                            </td>
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {task.endDate}
                            </td>
                            {tasks[task]?.map((dataItem) => (
                                <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                    {dataItem.assignee.username}
                                </td>
                            ))}
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {task.projectId}
                            </td>
                        </tr>
                    ))}
                </tbody>

I tried some codes but I couldn't do it. It doesn't work in the code you see here.

CodePudding user response：

assignee is not an array but an inner object, so it should be like this:

 <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
   {task.assignee.username}
 </td>

CodePudding user response：

assignee is just an object inside task array . you can access it just with

dataItem.assignee

change :

{tasks[task]?.map((dataItem) => (
                            <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
                                {dataItem.assignee.username}
                            </td>
                        ))}

to :

<td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">
            {task.assignee.username}
          </td>