Lab Practical Submission
Date: 09/01/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical-2:
1. Create a Jason object and display the same using node.js in the terminal.
display.js
//creating json object
constjsonObj={
name: 'Roshni Rana',
age: 19,
city: 'Ahmedabad',
};
//displaying
console.log(constjsonObj);
Output
2. Create a Node.js script to read and display the content of the external Jason file.
Datap2.json
{
"name": "Roshni Rana",
"age": 19,
"city": "Ahmedabad"
}
scriptp2.js
const fs = require('fs');
constfilePath='C:/Users/HP/Desktop/uni/fourth
sem/fswd/lab/datap2.json';
//reading the json file
fs.readFile(constfilePath,'utf8',(err,datap2)=>{
if(err){
console.error('Error reading the JSON file:',err);
return;
}
try{
//parse json data
//convert json data to javascript data
const jsonObj=JSON.parse(datap2);
console.log('JSON object content:',jsonObj);
console.log('Formatted JSON object content:',
JSON.stringify(jsonObj, null, 2));
}catch(parseError){
console.error('Error parsing JSON:', parseError);
}
});
Output
3. Create and display multi-dimensional Jason Arrays, also demonstrate Accessing
individual elements of the multi-dimensional Jason Arrays.
multidimensionalarray.js
// Create a multi-dimensional JSON array
const multiDimArray = [
[1, 2, 3],
[4, 5, 6],
['orange', 'chikoo', 'mango'],
['carrot', 'cucumber', 'beetroot']
];
// Display the multi-dimensional JSON array
console.log('Multi-dimensional JSON Array:');
console.log(multiDimArray);
// Accessing individual elements
console.log('\nAccessing individual elements:');
console.log('Element at [1][2]:', multiDimArray[1][2]);
console.log('Element at [0][1]:', multiDimArray[0][1]);
console.log('Element at [1][1]:', multiDimArray[1][1]);
console.log('Element at [2][1]:', multiDimArray[2][1]);
console.log('Element at [3][0]:', multiDimArray[3][0]);
Output
4. Simple web-based application example using JavaScript and JSON, you can
create a basic HTML page with JavaScript to manipulate JSON data. In this
example, let's create a simple to-do list application where tasks are stored in a
JSON array. Users can add tasks, mark them as completed, and remove them from
the list.
Code
manipulateJSONdata.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>To-do List App</title>
<style>
body {
background-color: beige;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li {
margin: 5px 0;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
}
h1 {
background-color: darkred;
color: beige;
}
.completed {
text-decoration: line-through;
color: brown;
}
</style>
</head>
<body>
<h1>To-do List App</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
// Sample JSON array for tasks
let tasks = [
{ id: 1, text: 'Complete chores', completed: false },
{ id: 2, text: 'Organize study table', completed: true },
{ id: 3, text: 'Do laundry', completed: false }
];
// Function to display tasks on the web page
function displayTasks() {
const taskListElement = document.getElementById('taskList');
taskListElement.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = task.completed;
li.appendChild(checkbox);
const textSpan = document.createElement('span');
textSpan.textContent = task.text;
li.appendChild(textSpan);
if (task.completed) {
li.classList.add('completed');
}
checkbox.addEventListener('change', () =>
toggleTaskStatus(task.id, li));
taskListElement.appendChild(li);
});
}
// Function to add a new task
function addTask() {
const taskInput = document.getElementById('taskInput');
const newTaskText = taskInput.value.trim();
if (newTaskText !== '') {
const newTask = {
id: tasks.length + 1,
text: newTaskText,
completed: false
};
tasks.push(newTask);
displayTasks();
taskInput.value = '';
}
}
// Function to toggle the status of a task (completed or not)
function toggleTaskStatus(taskId, li) {
const taskIndex = tasks.findIndex(task => task.id === taskId);
if (taskIndex !== -1) {
tasks[taskIndex].completed = !tasks[taskIndex].completed;
li.classList.toggle('completed');
}
}
// Initial display of tasks
displayTasks();
</script>
</body>
</html>
Output
