How to setup Onclick event for button. To display some details

General
1

How I should write code to display external READ(GET) api details to display on clicking a button.

2

That’s pretty advanced JS. I created some example with chat GPT, but you would need to adjust it to your needs :slight_smile:

$(document).on('click', '#read-more', function() {
    $.ajax({
        url: 'YOUR_API_ENDPOINT', // Replace with your actual API endpoint
        type: 'GET',
        dataType: 'json', // Assuming the response is in JSON format
        success: function(data) {
            // Assuming 'data' is an array of objects with image, title, description, and url
            data.forEach(item => {
                var cardHtml = `
                    <div class="card">
                        <img src="${item.image}" alt="${item.title}" />
                        <div class="card-body">
                            <h5 class="card-title">${item.title}</h5>
                            <p class="card-text">${item.description}</p>
                            <a href="${item.url}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>`;
                $('.blog-grid').append(cardHtml);
            });
        },
        error: function(xhr, status, error) {
            // Handle errors here
            console.log('Error: ' + error);
        }
    });
});
3

How to link this jscode to the respective button