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);
}