JavaScript中嵌套API数据模型化与类实例化教程

[
  {
    "id": 1,
    "categoryId": 1,
    "userId": 1,
    "category": {
      "id": 1,
      "name": "Objets"
    }
  }
]

export class ClassPicture {
  constructor(id, categoryId, userId, category) {
    this.id = id;
    this.categoryId = categoryId;
    this.userId = userId;
    // 错误：不应在构造函数内定义另一个类
    const category = class category {
      constructor(id, name) {
        this.id = id;
        this.name = name;
      }
    }
  }
}

/**
 * 表示图片分类的类。
 */
class ClassCategory {
    /**
     * @param {number} id - 分类ID。
     * @param {string} name - 分类名称。
     */
    constructor(id, name) {
        this.id = id;
        this.name = name;
    }

    /**
     * 获取分类名称。
     * @returns {string} 分类名称。
     */
    getName() {
        return this.name;
    }
}

/**
 * 表示图片的类。
 */
class ClassPicture {
  /**
   * @param {number} id - 图片ID。
   * @param {number} userId - 用户ID。
   * @param {ClassCategory} category - 图片所属的分类对象。
   */
  constructor(id, userId, category) {
    this.id = id;
    this.userId = userId;
    // category 属性将持有 ClassCategory 的一个实例
    this.category = category;
  }

  /**
   * 获取图片所属分类的名称。
   * @returns {string} 分类名称。
   */
  getCategoryName() {
    return this.category.getName();
  }
}

const apiData = [
  {
    "id": 1,
    "categoryId": 1, // 此字段在ClassPicture中可以被忽略，因为它已包含在category对象中
    "userId": 1,
    "category": {
      "id": 1,
      "name": "Category one"
    }
  },
  {
    "id": 2,
    "categoryId": 2,
    "userId": 2,
    "category": {
      "id": 2,
      "name": "Category two"
    }
  }
];

const pictures = [];

for (const pictureData of apiData) {
    // 1. 首先实例化嵌套的 ClassCategory 对象
    const categoryInstance = new ClassCategory(
        pictureData.category.id,
        pictureData.category.name
    );

    // 2. 然后实例化 ClassPicture 对象，并将 categoryInstance 传入
    const pictureInstance = new ClassPicture(
        pictureData.id,
        pictureData.userId,
        categoryInstance
    );

    pictures.push(pictureInstance);
}

// 访问实例化后的对象
console.log("第一个图片对象的ID:", pictures[0].id); // 输出: 1
console.log("第一个图片对象的分类名称:", pictures[0].getCategoryName()); // 输出: Category one
console.log("第二个图片对象的分类ID:", pictures[1].category.id); // 输出: 2

// 示例：添加一个新的图片到数组
const newCategory = new ClassCategory(3, "New Category");
const newPicture = new ClassPicture(
    3,
    JSON.parse(sessionStorage.getItem("id")), // 假设从 sessionStorage 获取用户ID
    newCategory
);
pictures.push(newPicture);
console.log("新增图片对象的分类名称:", pictures[2].getCategoryName()); // 输出: New Category