# Data Structure Again
# Data
Data is a collection of facts, information, and statistics and this can be in various forms such as numbers, text, sound, images, or any other format. ([What is Data ? - GeeksforGeeks](https://www.geeksforgeeks.org/what-is-data/))
# Structure
[STRUCTURE | English meaning - Cambridge Dictionary](https://dictionary.cambridge.org/dictionary/english/structure)
[The way in which the parts of a system or object](https://dictionary.cambridge.org/dictionary/english/structure) are arranged or organized, or a system arranged in this way:
Something that has been made or built from parts, especially a large building:
**to** [**plan**](https://dictionary.cambridge.org/dictionary/english/plan)**,** [**org**](https://dictionary.cambridge.org/dictionary/english/plan)[**anize**](https://dictionary.cambridge.org/dictionary/english/organize)**,** [**or arra**](https://dictionary.cambridge.org/dictionary/english/organize)[**nge**](https://dictionary.cambridge.org/dictionary/english/arrange) [**the par**](https://dictionary.cambridge.org/dictionary/english/arrange)[**ts**](https://dictionary.cambridge.org/dictionary/english/part) [**of so**](https://dictionary.cambridge.org/dictionary/english/part)**mething:**
*We must * [*care*](https://dictionary.cambridge.org/dictionary/english/plan)[*full*](https://dictionary.cambridge.org/dictionary/english/carefully)[*y *](https://dictionary.cambridge.org/dictionary/english/carefully) [*structur*](https://dictionary.cambridge.org/dictionary/english/organize)*e an*[*d rehea*](https://dictionary.cambridge.org/dictionary/english/arrange)[*rs*](https://dictionary.cambridge.org/dictionary/english/rehearse)[*e*](https://dictionary.cambridge.org/dictionary/english/rehearse) [* each*](https://dictionary.cambridge.org/dictionary/english/part) [* s*](https://dictionary.cambridge.org/dictionary/english/rehearse)[*cen*](https://dictionary.cambridge.org/dictionary/english/scene)[*e.*](https://dictionary.cambridge.org/dictionary/english/scene)
[*a*](https://dictionary.cambridge.org/dictionary/english/scene) * well-s*[*truc*](https://dictionary.cambridge.org/dictionary/english/plan)*tured* [](https://dictionary.cambridge.org/dictionary/english/carefully)[*argument*](https://dictionary.cambridge.org/dictionary/english/organize)
**to** **arrange or orga****nize** **something:**
# **\[ \] - Square Br**[**ack**](https://dictionary.cambridge.org/dictionary/english/rehearse)**et**
[Squa](https://dictionary.cambridge.org/dictionary/english/scene)re brackets com[e in pair](https://dictionary.cambridge.org/dictionary/english/carefully)[s as **\[**](https://dictionary.cambridge.org/dictionary/english/argument) and **\]**
Square brackets became essential in programming languages. Their role in arrays, lists, and index operations traces back to early languages
**Grouping**: In complex mathematical expressions, square brackets are used to enclose sub-expressions, especially when nested inside parentheses([MathWorl](https://mathworld.wolfram.com/SquareBracket.html)[d)(W](https://mathworld.wolfram.com/SquareBracket.html)[iki](https://en.wikipedia.org/wiki/Bracket_\(mathematics\))[pedia).](https://en.wikipedia.org/wiki/Bracket_\(mathematics\))
# **{ } Curly Braces**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727751646662/afd78fc7-3b03-4442-a2e0-ed55f52328bb.png align="center")
[\\In](https://dictionary.cambridge.org/dictionary/english/scene) the image, we have a [table wi](https://dictionary.cambridge.org/dictionary/english/argument)th **student information** such as name, section, age, and email. This table can be [used to i](https://mathworld.wolfram.com/SquareBracket.html)ll[ustrate two co](https://mathworld.wolfram.com/SquareBracket.html)[mm](https://en.wikipedia.org/wiki/Bracket_\(mathematics\))[on ways o](https://mathworld.wolfram.com/SquareBracket.html)[f](https://en.wikipedia.org/wiki/Bracket_\(mathematics\)) o[rganizing](https://en.wikipedia.org/wiki/Bracket_\(mathematics\)) data: **lists** and **objects**.
**Again**
In programming, a **data structure** is a way of organizing and storing data so it can be accessed and worked with efficiently. Two common data structures are **lists** (or arrays) and **objects** (or dictionaries/hashmaps in python and java).
**Lists** are ordered collections of data. Each element in a list can be accessed using an index, which starts at 0.
Here’s how you can represent a list for students, with lists holding each student’s name, section, ID, and email:
```typescript
student_name_list = ["Juan Carlos", "Jose Rizal", "Juan Luna", "Andres Bonifacio", "Justin Bieber", "Michael Jordan", "Andrew Jordan", "Jessa Boe", "Ted Talk"]
student_section_list = ["BSIT-4B", "BSIT-2A", "BSIT-3A", "BSIT-3A", "BSIT-2A", "BSIT-4A", "BSIT-3A", "BSIT-2B", "BSIT-3B"]
student_id_list = [1, 2, 3, 4, 5, 6, 7, 8, 9]
student_email_list = ["juan@gmail.com", "jose@gmail.com", "juan@gmail.com", "andres@gmail.com", "justin@gmail.com", "michael@gmail.com", "andrew@gmail.com", "jessa@gmail.com", "ted@gmail.com"]
```
* Each list holds related information. For example, `student_name_list` contains all student names, while `student_section_list` contains the corresponding sections for each student.
* You can access elements by their index. For example, `student_name_list[0]` will give you `"Juan Carlos"`, and `student_email_list[0]` will give you [`juan@gmail.com`](mailto:juan@gmail.com).
**Lists**: Useful when you need to handle multiple entries of the same type (like all student names). You access them by index, such as `student_name_list[0]` to get the first student’s name.
---
### Object/Dictionary/Hashmap
An **object** allows us to store key-value pairs. Each piece of data (a student's name, section, etc.) is associated with a **key**.
Here are the individual **student objects** based on the data provided in the table image:
```typescript
student_object1 = {
"name": "Juan Carlos",
"section": "BSIT-4B",
"id": 1,
"email": "juan@gmail.com",
"age": 22
}
student_object2 = {
"name": "Jose Rizal",
"section": "BSIT-2A",
"id": 2,
"email": "jose@gmail.com",
"age": 21
}
student_object3 = {
"name": "Juan Luna",
"section": "BSIT-3A",
"id": 3,
"email": "juan@gmail.com",
"age": 20
}
student_object4 = {
"name": "Andres Bonifacio",
"section": "BSIT-3A",
"id": 4,
"email": "andres@gmail.com",
"age": 20
}
student_object5 = {
"name": "Justin Bieber",
"section": "BSIT-2A",
"id": 5,
"email": "justin@gmail.com",
"age": 21
}
student_object6 = {
"name": "Michael Jordan",
"section": "BSIT-4A",
"id": 6,
"email": "michael@gmail.com",
"age": 19
}
student_object7 = {
"name": "Andrew Jordan",
"section": "BSIT-3A",
"id": 7,
"email": "andrew@gmail.com",
"age": 20
}
student_object8 = {
"name": "Jessa Boe",
"section": "BSIT-2B",
"id": 8,
"email": "jessa@gmail.com",
"age": 18
}
student_object9 = {
"name": "Ted Talk",
"section": "BSIT-3B",
"id": 9,
"email": "ted@gmail.com",
"age": 19
}
```
**Objects/Dictionaries/HashMap**: Better for holding related data about one entity (like a single student’s details). You access data by key, such as `student_object1["name"]` to get the name of the student.
---
### **List of Objects/Dictionaries/HashMap**
You can also combine lists and objects to store multiple student records in a more organized way. A **list of objects** allows you to store a collection of student objects, each containing all the relevant details.
Now, you can store all these individual student objects into a **list of objects**:
```typescript
students = [
{
"name": "Juan Carlos",
"section": "BSIT-4B",
"id": 1,
"email": "juan@gmail.com",
"age": 22
},
{
"name": "Jose Rizal",
"section": "BSIT-2A",
"id": 2,
"email": "jose@gmail.com",
"age": 21
},
{
"name": "Juan Luna",
"section": "BSIT-3A",
"id": 3,
"email": "juan@gmail.com",
"age": 20
},
{
"name": "Andres Bonifacio",
"section": "BSIT-3A",
"id": 4,
"email": "andres@gmail.com",
"age": 20
},
{
"name": "Justin Bieber",
"section": "BSIT-2A",
"id": 5,
"email": "justin@gmail.com",
"age": 21
},
{
"name": "Michael Jordan",
"section": "BSIT-4A",
"id": 6,
"email": "michael@gmail.com",
"age": 19
},
{
"name": "Andrew Jordan",
"section": "BSIT-3A",
"id": 7,
"email": "andrew@gmail.com",
"age": 20
},
{
"name": "Jessa Boe",
"section": "BSIT-2B",
"id": 8,
"email": "jessa@gmail.com",
"age": 18
},
{
"name": "Ted Talk",
"section": "BSIT-3B",
"id": 9,
"email": "ted@gmail.com",
"age": 19
}
]
```
**List of objects** allows you to manage multiple student records in a more organized manner. You can loop through the `students` list to access all the student data or filter it based on certain criteria (like finding all students in a particular section).
### Why is This Important Again?
Understanding how to organize data using **lists** and **objects** forms the foundation for more complex data structures and algorithms in programming. Efficient data organization allows for faster search, retrieval, and manipulation of data, which is critical in software development.
In backend and frontend development, knowing how to structure data is crucial. For example:
* In the **frontend**, you may need to dynamically display this student data on a webpage.
* In the **backend**, you might need to store or manipulate this data before sending it to a frontend or saving it in a database.
---
## **USE CASE**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727757000732/df382148-1edb-477f-9fa4-66d486f10878.png align="center")
The image provided illustrates a **use case** of data structures in the context of an **e-commerce platform** like Shopee.
How data flows from the backend to the frontend and how data structures are utilized in this process.
### Use Case Overview
1. **API Request**:
* The frontend (Angular in this case) sends a **GET** request to the backend.
* The request includes parameters, such as `page` and `category`, to filter the products, e.g., `GET /api/product?page=20&category=women`.
2. **API Response**:
* The backend (in Python or any server-side technology) processes the request and responds with a JSON object.
* The JSON contains the number of items (`items`), the current page (`page`), and a list of **products**. Each product in the list is represented as an **object** with key-value pairs containing its ID, name, price, and possibly more details.
3. **Data Structure in Frontend**:
* Once the JSON response is received, it is parsed in the frontend and stored in **objects**.
* The frontend uses **arrays (lists)** of objects to store multiple products. For example, the list of products would look something like:
```typescript
products = [
{ id: 1, name: "productName1", price: 200 },
{ id: 2, name: "productName2", price: 200 },
// ...more products
];
```
4. **Rendering the Data**:
* The frontend (Angular) uses this list of objects to dynamically render the products on the webpage.
* Each product's data (e.g., name, price, image) is displayed in a grid layout similar to the Shopee interface, as seen in the image.
### Data Structures
1. **Objects**:
* Each product is stored as an object (or dictionary) where its properties are key-value pairs. For example:
```typescript
{
"id": 1,
"name": "productName1",
"price": 200
}
```
* Objects allow easy access to product properties by keys like `id`, `name`, or `price`.
2. **Lists (Arrays)**:
* A list of products is stored in an array, allowing the system to manage multiple products and iterate over them easily to display on the webpage.
## EXAMPLE IN PYTHON FLASK API:
In this example, the Flask API returns product data as a JSON response when a GET request is made to `/api/product`.
```python
products = [
{"id": 1, "name": "Oval Basket Tray", "price": 15},
{"id": 2, "name": "Kitchen Dishes Drainage Basket", "price": 78},
{"id": 3, "name": "Katy Perry Meow Perfume", "price": 129},
{"id": 4, "name": "UV Design Umbrella", "price": 99},
{"id": 5, "name": "Dove Intensive Repair Shampoo", "price": 75}
]
@app.route('/api/product', methods=['GET'])
def get_products():
# Extracting parameters from the request (like page or category)
page = request.args.get('page', 1, type=int)
category = request.args.get('category', 'all')
response_data = {
"items": len(products), # Total number of items
"page": page, # Current page
"products": products # List of product data
}
return jsonify(response_data)
```
### Example in JavaScript (Frontend)
After receiving the API response, we can process the data as follows:
```typescript
fetch('/api/product?page=20&category=women')
.then(response => response.json())
.then(data => {
const products = data.products;
products.forEach(product => {
console.log(product.name, product.price);
});
```
* **API Requests** fetch product data from the backend.
* **Objects** store product details (ID, name, price).
* **Arrays (Lists)** store multiple product objects for easy management and iteration.
* The frontend renders the product data dynamically into a user interface similar to what is shown on platforms like Shopee.
These basic data structures are fundamental in every programming language. Whether you're handling simple data like student information or managing more complex datasets, understanding how to use lists and objects will help you become an efficient programmer.