I am trying to create a program that allows users to create lists and save data inside lists. I have created two pages first page has the data and second page where you create a list. Let me tell you the problem, as if I create three lists and I would like to save the data in the second list by onclick, but the data is saved in all three lists.
What I have tried:
Here is the first page which has data.
page1.js
'items and domore are the data for now.'
const apiSchema = 'http://localhost:5000/api/Schema'
const TableBody = document.querySelector('#recieve-info');
let items = 'hey'
let domore = 'hi'
TableBody.addEventListener('click', async (e) => {
let SaveButtonPressed = e.target.id == 'save-button'
if (SaveButtonPressed) {
let data = { items, domore }
let options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};
const response = await fetch(apiSchema, options);
const json = await response.json();
console.log(json);
}
});
const ItemConnectionUrl = 'http://localhost:5000/item/Schema';
let Output = '';
const renderDataItem = (datas) => {
datas.forEach((Item) => {
Output += `
<tr class = "tr">
<td name = "dynamicValue">${Item.data}</td>
<td name = "button"> <button class="Save-Button" id="save-button">Save</button> </td>
</tr>`
});
TableBody.innerHTML = Output;
}
fetch(ItemConnectionUrl)
.then(res => res.json())
.then(data => renderDataItem(data));
Here is the model of page1
model1.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const api_list = new Schema({
data: Array
});
module.exports = mongoose.model('api_list', api_list);
Here is the route of first page
route1.js
const express = require('express');
const router = express();
const bodyparser = require("body-parser")
const mongoose = require('mongoose');
const { json } = require('body-parser');
const apiSchema = require('../models/page1');
router.get('/', async (req,res) => {
try{
const apis = await apiSchema.find();
if(!apis) throw Error('No list');
res.status(200).json(apis);
}catch(err){
res.status(400).json({msg : err});
}
});
router.post('/', async (req, res) => {
let data =req.body
const apilist = new apiSchema({data});
console.log(apilist)
try{
const api = await apilist.save();
if(!api) throw Error('Something went wrong while saving to list');
res.status(200).json({api});
} catch(err) {
res.status(400).json({msg : err});
}
});
Here is the screenshot of first page (list1, list2, list3) come from the lists page. I would like that if i click the second list(
list2) button I want the data to be saved in the second list on the lists page.
Screenshot of first page
Here is the second page where you create a list (lists page)
page2.js (lists page)
const TableBody = document.querySelector('#tableBody');
const addItemForm = document.querySelector('.add-item-form')
const titleValue = document.querySelector('#title');
const addButton = document.querySelector('#add')
let Output = '';
const ItemConnectionUrl = 'http://localhost:5000/item/Schema'
const renderDataItem = (datas) => {
datas.forEach((Item) => {
Output += `<tr data-id=${Item._id}>
<td scope="row">class="fas fa-arrow-right" id="open" data-modal-target="#modal"></button></td>
<td class="table-buttons"><button class="btn btn-sm btn-danger delete-btn" id="delete_btns">^__i class="fas fa-trash-alt icon icon-modify"></button></td>
</tr>`
});
TableBody.innerHTML = Output
}
fetch(ItemConnectionUrl)
.then(res => res.json())
.then(data => renderDataItem(data));
TableBody.addEventListener('click', (e) => {
e.preventDefault();
let deleteButton = e.target.id == 'delete_btns'
let editButton = e.target.id == 'edit_btn'
let id = e.target.parentElement.parentElement.dataset.id;
if(deleteButton){
fetch(`${ItemConnectionUrl}/${id}`, {
method : 'DELETE',
})
.then(res => res.json())
.then(() => location.reload())
}
if(editButton){
const edit = e.target.parentElement.parentElement;
let dataContent = edit.querySelector('.ele').textContent;
titleValue.value = dataContent;
addButton.addEventListener('click', (e) => {
e.preventDefault()
fetch(`${ItemConnectionUrl}/${id}`,{
method : 'PATCH',
headers : {
'Content-Type' : 'application/json'
},
body : JSON.stringify({
data : titleValue.value
})
})
.then(res => res.json())
.then(() => location.reload())
});
};
});
addItemForm.addEventListener('submit', (e) => {
e.preventDefault();
fetch(ItemConnectionUrl, {
method : 'POST',
headers:{
'Content-Type': 'application/json'
},
body : JSON.stringify({
data : titleValue.value
})
})
.then(res => res.json())
.then(data => {
const dataArr = [];
dataArr.push(data)
renderDataItem(dataArr)
});
titleValue.value=''
});
const apiSchema = 'http://localhost:5000/api/schema'
async function ParaG() {
const response = await fetch(apiSchema);
const data = await response.json();
console.log(data);
for (let item of data) {
let info = item.data[0]
const para = document.querySelector('.Second-Para');
para.innerHTML += `${info.items}, ${info.domore}`
}
}
Here is the model of page 2
model2.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const item_list = new Schema({
data : String
});
module.exports = mongoose.model('item_list', item_list);
Here is the route 2
route2.js
const express = require('express');
const router = express();
const bodyparser = require("body-parser");
const mongoose = require('mongoose');
const { request, response } = require('express');
const itemSchema = require('../models/page2');
router.get('/', async (req, res) => {
res.status(200).json(items);
} catch (err) {
res.status(400).json({ msg: err });
}
});
router.get('/:id', async (req, res) => {
try {
const items = await itemSchema.findById(req.params.id);
if (!items) throw Error('No list');
res.status(200).json(items);
} catch (err) {
res.status(400).json({ msg: err });
}
});
router.post('/', async (req, res) => {
const itemlist = new itemSchema(req.body);
try {
const item = await itemlist.save();
if (!item) throw Error('Something went wrong while saving to list');
res.status(200).json(item);
} catch (err) {
res.status(400).json({ msg: err });
}
});
router.delete('/:id', async (req, res) => {
try {
const item = await itemSchema.findByIdAndDelete(req.params.id);
if (!item) throw Error('no list found');
res.status(200).json({ success: true })
} catch (err) {
res.status(400).json({ msg: err });
}
});
router.patch('/:id', async (req, res) => {
try {
const item = await itemSchema.findByIdAndUpdate(req.params.id, req.body);
if (!item) throw Error('Something went wrong while updating the list');
res.status(200).json({ success: true })
} catch (err) {
res.status(400).json({ msg: err });
}
});
router.get('/', async (req, res) => {
try {
const items = await itemSchema.find();
if (!items) throw Error('No list');
res.json(items)
} catch (err) {
res.status(400).json({ msg: err });
}
});
All lists are linked to a pop up modal where i want the data to be saved
Screenshot of lists page
screenshot of lists page where i want the data to be saved.
Where i want the data to be saved
Can anyone help me. Thanks