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)
Structure
STRUCTURE | English meaning - Cambridge Dictionary
The way in which the parts of a system or object 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, organize, or arrange the parts of something:
We must carefully structure and rehearse each scene.
to arrange or orga**nize something:**
[ ] - Square Bracket
Square brackets come in pair[s as [](dictionary.cambridge.org/dictionary/english..) 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(MathWorld)(Wikipedia).
{ } Curly Braces
\In the image, we have a table with student information such as name, section, age, and email. This table can be used to illustrate two common ways of organizing 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:
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_listcontains all student names, whilestudent_section_listcontains the corresponding sections for each student.You can access elements by their index. For example,
student_name_list[0]will give you"Juan Carlos", andstudent_email_list[0]will give youjuan@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:
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:
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
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
API Request:
The frontend (Angular in this case) sends a GET request to the backend.
The request includes parameters, such as
pageandcategory, to filter the products, e.g.,GET /api/product?page=20&category=women.
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.
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:
products = [
{ id: 1, name: "productName1", price: 200 },
{ id: 2, name: "productName2", price: 200 },
// ...more products
];
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
Objects:
Each product is stored as an object (or dictionary) where its properties are key-value pairs. For example:
{ "id": 1, "name": "productName1", "price": 200 }Objects allow easy access to product properties by keys like
id,name, orprice.
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.
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:
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.