i want to make a table with JavaScript and i am fetching data from Api so i have created two function and i want to merge these functions in to single #output
. my one function is fetch data from api and render out in table, second is fetch data from Api for filtering the data.
index.js
// output of data const Story = document.querySelector('#approvedList'); // Create Event Listener document.querySelector('#search-input').addEventListener('keyup', filterPost); // Get All Posts Data function getPosts() { axios.get('http://localhost:8000/api/approved/') // data response .then((res) => { Story.innerHTML = ''; res.data.results.map((object) => { Story.innerHTML += `<tr> <td>${object.id}</td> <td><a href="#" class="detaillink">${object.title}</a></td> <td>${object.author}</td> <td>"${object.created_on}"</td> </tr>`; }) }) .catch(error => console.log(error)) }; getPosts(); // Filtered Data function function filterPost(e) { let value = e.target.value axios.get(`http://localhost:8000/api/approved/?search=${value}`) // data response .then((res) => { Story.innerHTML = ''; res.data.results.map((object) => { Story.innerHTML += `<tr> <td>${object.id}</td> <td><a href="#" class="detaillink">${object.title}</a></td> <td>${object.author}</td> <td>"${object.created_on}"</td> </tr>`; }) }) .catch(error => console.log(error)) }
Advertisement
Answer
Basically just do one function that can accept filter and just check if that filter is provided, and if it is – then add to url your parameters. Quick one would be this:
// Get All Or Filtered Posts Data function getPosts(filter = null) { let url = 'http://localhost:8000/api/approved/'; if(filter) { url += `?search=${filter}` } axios.get(url) // data response .then((res) => { Story.innerHTML = ''; res.data.results.map((object) => { Story.innerHTML += `<tr> <td>${object.id}</td> <td><a href="#" class="detaillink">${object.title}</a></td> <td>${object.author}</td> <td>"${object.created_on}"</td> </tr>`; }) }) .catch(error => console.log(error)) }; getPosts(); // Filtered Data event handler function filterPost(e) { let value = e.target.value getPosts(value); }