Skip to content

how to can i merge two functions into single function?

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

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