顯示 JavaScript 中嵌套的 object 個對象的值

Question

我有一個嵌套的 object 對象，我需要顯示其中的一些數據。 object 是：

{
"2": {
   "id": 2,
        "username": "mark",
        "position": "Director",
        "branch": "NY Branch",
        "name": "Mark Branson",
        "attendance": {
            "2022-11-01": {
                "times": [],
                "status": "holiday"
            },
            "2022-11-02": {
                "times": [
                    "11:05:31",
                    "11:51:30",
                    "12:59:50"
                ],
                "status": "late"
            },
            "2022-11-03": {
                "times": [
                    "10:24:17",
                    "11:05:20",
                    "11:10:09"                  
                ],
                "status": "late"
            },
},
"4": {
  "id": 4,
        "username": "john",
        "position": "Manager",
        "branch": "SF Branch",
        "name": "John Miller",
        "attendance": {
            "2022-11-01": {
                "times": [],
                "status": "holiday"
            },
            "2022-11-02": {
                "times": [
                    "11:05:31",
                    "11:51:30",
                    "12:59:50"
                ],
                "status": "present"
            },
            "2022-11-03": {
                "times": [
                    "10:24:17",
                    "11:05:20",
                    "11:10:09"                  
                ],
                "status": "late"
            },
},
"5": {
   "id": 5,
        "username": "emma",
        "position": "HR",
        "branch": "Head Branch",
        "name": "Emma Smith",
        "attendance": {
            "2022-11-01": {
                "times": [],
                "status": "holiday"
            },
            "2022-11-02": {
                "times": [
                    "11:05:31",
                    "11:51:30",
                    "12:59:50"
                ],
                "status": "late"
            },
            "2022-11-03": {
                "times": [
                    "10:24:17",
                    "11:05:20",
                    "11:10:09"                  
                ],
                "status": "present"
            },
},
}

我需要實現的設計是這樣的

設計

到目前為止我寫的 React 代碼是：

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [object, setUsers] = useState([]);

  useEffect(() => {
    const instance = axios.create({
      baseURL: "https://test.com/",
      headers: {
        Authorization: "Bearer token",
      },
    });
    const getData = async () => {
      const userData = await instance.get("/test");
      setUsers(userData.data);
    };
    getData();
  }, []);
  console.log("Object", object);
  console.log("Object.keys(object)", Object.keys(object));

  console.log("Attendance", Object.entries(object));

  let nameData = [];

  Object.keys(object).forEach(function (key) {
    console.log("Name", object[key].name);
    nameData.push(object[key].name);
  });

  console.log("nameData", nameData);

  let newAttendanceData = [];

  Object.keys(object).forEach(function (key) {
    console.log("Attendence Data", object[key].attendance);
    console.log(
      "Attendence Data of 2 Nov",
      Object.keys(object[key].attendance)[1]
    );
    console.log(
      "Attendence Data of 2 Nov value",
      Object.keys(object[key].attendance)[1]
    );
    newAttendanceData.push(object[key].attendance);
  });

  console.log("newAttendanceData", newAttendanceData);

  return (
    <div className="App">
      <div>
        <table>
          <tr>
            <th> Date</th>
            <th> Name </th>
            <th> Status </th>
          </tr>
          <tr>
            <td>
              <div>{nameData && nameData.map((name) => <div>{name}</div>)}</div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  );
}

這不是按照設計正確地顯示數據，map這些object數據的正確方法是什么，以便數據可以按照設計顯示？ 需要一種從嵌套的 object 結構中獲取數據的方法。

Answer 1

為什么嵌套id: 2在 parent 2中使你的工作復雜化？ 您可以像這樣簡單地保存它們

{
 2: {
  "username": "mark",
  "position": "Director",
  "branch": "NY Branch",
  "name": "Mark Branson",
  ...
 },
}

要么

{
 {
   "id": 2,
   "username": "mark",
   "position": "Director",
   "branch": "NY Branch",
   "name": "Mark Branson",
   ...
 },
}

不管怎樣，我會用你的數據結構以一種基本的方式解決它。 作為模型，我看到我們只需要員工姓名、出勤日期和狀態，我們可以這樣得到它們

let newData = [];

Object.keys(object).forEach((key) => {
 const name = object[key].name;
 const attendances = object[key].attendance;
 for (let date in attendances) {
  newData.push({
   employeeName: name,
   date: date,
   status: attendances[date].status
  });
 }
});

您可以按照自己喜歡的方式將結果推送到newData中，希望對您有所幫助。

Answer 2

下面是一種將該數據結構轉換為更易於滿足您的需求的方法。 我更正了您輸入數據結構中的拼寫錯誤。 不清楚結果數據是否應該排序，或者以什么順序排序，所以我提供了一個按日期排序的快速演示：

 let transformData = inp => { let out = []; for (let person of Object.values(inp)) { for (let date of Object.keys(person.attendance)) { // capture a new record: out.push({ "name": person.name, "date": date, "status": person.attendance[date].status }) } } // sort here, if needed: out = out.sort((a, b) => { return a.date > b.date }); return out; } let data = { "2": { "id": 2, "username": "mark", "position": "Director", "branch": "NY Branch", "name": "Mark Branson", "attendance": { "2022-11-01": { "times": [], "status": "holiday" }, "2022-11-02": { "times": [ "11:05:31", "11:51:30", "12:59:50" ], "status": "late" }, "2022-11-03": { "times": [ "10:24:17", "11:05:20", "11:10:09" ], "status": "late" }, } }, "4": { "id": 4, "username": "john", "position": "Manager", "branch": "SF Branch", "name": "John Miller", "attendance": { "2022-11-01": { "times": [], "status": "holiday" }, "2022-11-02": { "times": [ "11:05:31", "11:51:30", "12:59:50" ], "status": "present" }, "2022-11-03": { "times": [ "10:24:17", "11:05:20", "11:10:09" ], "status": "late" }, } }, "5": { "id": 5, "username": "emma", "position": "HR", "branch": "Head Branch", "name": "Emma Smith", "attendance": { "2022-11-01": { "times": [], "status": "holiday" }, "2022-11-02": { "times": [ "11:05:31", "11:51:30", "12:59:50" ], "status": "late" }, "2022-11-03": { "times": [ "10:24:17", "11:05:20", "11:10:09" ], "status": "present" }, } } } console.log(transformData(data))