Read Models (GET /api/models, GET /api/models/:id)

Relevant source files

The following files were used as context for generating this wiki page:

• server.js
• APP/models/model.model.js
• public/index.html
• APP/models/index.js
• APP/config/db.config.js
• seed.js
• APP/routes/model.routes.js

The "Read Models" functionality provides the core mechanism for retrieving model data from the application's MongoDB database. It is exposed through two primary REST API endpoints: GET /api/models for fetching a complete list of all models, and GET /api/models/:id for retrieving a single model by its unique identifier.

These endpoints are central to the application, serving data to the frontend, which then renders a searchable and filterable grid of models. The data is initially fetched in bulk, and subsequent interactions like viewing model details are handled client-side using the pre-loaded data.

API Endpoints

The server exposes two GET endpoints for reading model data. Both are defined directly within the main server file.

Sources: server.js:52-66, APP/routes/model.routes.js

GET /api/models

This endpoint retrieves all model documents from the database, sorted alphabetically by name.

Property	Description
URL	/api/models
Method	GET
Authentication	None required for reading.
Success Response	200 OK with a JSON array of model objects.
Error Response	500 Internal Server Error with a JSON object { "error": "message" }.

// Source: server.js:52-58
app.get("/api/models", async (req, res) => {
  try {
    const models = await Model.find({}).sort({ name: 1 });
    res.json(models);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

GET /api/models/:id

This endpoint retrieves a single model document specified by its MongoDB _id. While defined in the backend, this endpoint is not currently utilized by the frontend logic in public/index.html, which instead relies on the data pre-fetched by the /api/models endpoint.

Property	Description
URL	/api/models/:id
Method	GET
Authentication	None required for reading.
URL Parameters	id (string, required): The unique _id of the model to retrieve.
Success Response	200 OK with a single JSON model object.
Error Response	500 Internal Server Error with a JSON object { "error": "message" }.

// Source: server.js:60-66
app.get("/api/models/:id", async (req, res) => {
  try {
    const model = await Model.findById(req.params.id);
    res.json(model);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

Data Flow

The primary data flow for reading models begins when the user loads the main page. The browser executes a fetch request to the /api/models endpoint. The Express server queries the MongoDB database, retrieves all models, and returns them as a JSON array. The frontend then processes this array to render the model grid.

The following sequence diagram illustrates this flow.

Data Structure (Model Schema)

All model data is structured according to a Mongoose schema. The schema defines the fields, data types, and constraints for each model document stored in the database. The database connection is configured in APP/config/db.config.js and initialized in APP/models/index.js.

Sources: APP/models/model.model.js, APP/config/db.config.js, APP/models/index.js

The following diagram shows the entity relationship for the Model schema.

Schema Fields

The table below details the fields defined in the Model schema.

Field	Type	Required	Default	Description
id	String	true		A unique identifier for the model.
name	String	true		The name of the model.
age	Number	false		The age of the model.
location	String	false		The location of the model.
profile	String	true		A detailed text profile of the model.
pricing	String	true		A text block containing pricing information.
dosAndDonts	String	true		A text block listing "do's and don'ts".
extraTabs	Array	false	[]	An array for storing extra information.
history	Array	false	[]	An array that logs changes to the document. Automatically updated via a pre('save') hook.
timestamps	Boolean		true	Mongoose option to automatically add createdAt and updatedAt fields.

Sources: APP/models/model.model.js:2-15, seed.js

Frontend Integration

The frontend, defined in public/index.html, is the primary consumer of the GET /api/models endpoint. On page load, the fetchModels JavaScript function is called to retrieve all model data.

// Source: public/index.html:89-92
async function fetchModels() {
    const res = await fetch('/api/models');
    models = await res.json();
    models.sort((a, b) => a.name.localeCompare(b.name));
    renderModels(models);
}

Key aspects of the frontend integration:

• Data Fetching: The fetchModels function sends a request to /api/models.
• Local Caching: The returned JSON array is stored in a global models variable.
• Rendering: The renderModels function dynamically creates HTML elements for each model and injects them into the #modelGrid div.
• Modal Display: When a user clicks on a model, the openModal(id) function is triggered. It finds the corresponding model object in the locally cached models array using its _id and displays its details in a modal window. It does not make a separate API call to GET /api/models/:id.

Sources: public/index.html:89-113