1

app.js

const database = new Datastore('database.db');
database.loadDatabase();

app.get('/api', (request, response) => {
    database.find({},(err,data)=> {
        if(err){
            response.end();
            return;
        }
        response.json(data)
    });
});

app.post('/api', (request, response) => {
    const data = request.body;
    database.insert(data);
    response.json(data);
});

page1.js

function TableRow() {
    let items = '1'
    let domore = '2'
    let cells = document.querySelectorAll('#recieve-info td');
    cells.forEach(cell => cell.onclick = async function () {
        let prevcell = cell.previousElementSibling;
        if (prevcell) {
            let data = {items, domore}
            let options = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body:JSON.stringify(data)
            };

            const response = await fetch('/api',options);
            const json = await response.json();
            console.log(json);
    }
    });
}

I am trying to pass data from one page to another by onclick, like if i click on the first one which is 'Save1' I want to save data only in the first one. But now the data is saving on all three

page1.js

page2.js

async function ParaG() {
  const response = await fetch('/api');
  const data = await response.json();
  console.log(data);

  for(item of data){
    const para = document.querySelector('.Second-Para');
    para.textContent += `${item.items}, ${item.domore}`
  }

}

I have created a pop up modal for every button,like when I click on the first button I would like to have the data that has been saved in that button.

page2.js

sorry for my English, I tried to explain what I could

Eduardo Fellipe
  • 376
  • 2
  • 14
deepak randhawa
  • 101
  • 9

1 Answers1

1

Well I understood that the final goal is to store an item on a specific list , and then be able to retrieve items from a selected list.

In my vision there's some information missing, but I will try to suppose some of them

Back-end

Database

Looking to solve the problem from the back-end, we can see that to achieve the final goal, you would need to have at least two entities on database:

  1. List
  2. Item

Containing columns with primary and unique key as ID for example.

And Item entity should contain a column refer (FK) to List entity as "list_id"

Well as there's no info about the entities I will suppose that your database have it

In consequence I do not know the relationship between them, so I will suppose is a simple one-to-many (A list with various itens and a item inside just one list)

Routes

Now to link this database with your front-end, you need some routes for that.

As you wrote there's just one called /api, which is not a good practice , but you could use it by adding params to the route as /api/:item_id/:list_id, then retrieving the item, next adding the list_id into it.

A better approach would be to have different routes for each entity like :

  1. /api/list

In this route when you send POST request, it should be able to create a new list. And if you send a GET request, it should be able to give you all the lists

  1. /api/list/:list_id

In this route when you send POST request, it should be able to show your specific list by finding in the database by id, which you receive on the url param as list_id

  1. /api/item

In this route when you send POST request, it should be able to create a new item. And if you send a GET request, it should be able to give you all the itens

  1. /api/item/:item_id/:list_id

In this route when you send POST request, it should be able to create a new item-list relationship, where you get the item by the id on the params , then adds the list_id to it .

  1. /api/item/:list_id

In this route when you send GET request, it should retrieve from application database all the itens which have the same value of the column list_id as the one on the params

Front-End Front-end can be built based on the routes , whenever we need to create a list or item we can send a POST request to the routes 1 or 2 , as well , when is needed to receive itens and lists we send a GET to them too

Now when we want to add an item to a list , a POST request to 4 , passing the item id and the list id on the params should solve the problem.

To get an specific list a GET request on 2 , passing the list_id should solve it

Finally, to get all the items from a specific list, request a GET on 5, passing the id of the list you want the item should solve it.

To let your life easier and from the one's who helped you here on SO , I recommend you to READ THIS, helps you to find out how to make better questions

Eduardo Fellipe
  • 376
  • 2
  • 14