DeveloperBreeze

Fetching Chuck Norris Jokes from API in JavaScript

javascript
Error Handling API fetch Chuck Norris jokes apiUrl response.json data.value 
const apiUrl = 'https://api.chucknorris.io/jokes/random';
fetch(apiUrl)
    .then(response => response.json())
    .then(data => console.log('Chuck Norris Joke:', data.value))
    .catch(error => console.error('Error:', error));

Related Posts

More content you might like

Code
javascript

Dynamic and Responsive DataTable with Server-Side Processing and Custom Styling

  • initComplete: Adds custom classes to dropdowns and inputs in the DataTables UI for consistent styling.
  • drawCallback: Applies custom classes to various table elements (e.g., rows, headers, cells) after each table draw to enhance the appearance.

Oct 24, 2024
Read More
Tutorial
php

Handling HTTP Requests and Raw Responses in Laravel

Most modern APIs return data in JSON format. Laravel simplifies handling JSON responses by providing a json() method.

use Illuminate\Support\Facades.Http;

$response = Http::post('https://api.example.com/endpoint', [
    'key1' => 'value1',
    'key2' => 'value2',
]);

$data = $response->json(); // Automatically parses JSON response into an associative array
dd($data);

Oct 24, 2024
Read More
Article
javascript

20 Useful Node.js tips to improve your Node.js development skills:

No preview available for this content.

Oct 24, 2024
Read More
Tutorial
javascript

AJAX with JavaScript: A Practical Guide

Before the Fetch API, the traditional way to make AJAX requests was using XMLHttpRequest.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with XMLHttpRequest</title>
</head>
<body>
    <button id="fetchDataBtn">Fetch Data</button>
    <div id="dataOutput"></div>

    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

            xhr.onload = function() {
                if (this.status === 200) {
                    var data = JSON.parse(this.responseText);
                    document.getElementById('dataOutput').innerHTML = `
                        <h3>${data.title}</h3>
                        <p>${data.body}</p>
                    `;
                }
            };

            xhr.onerror = function() {
                console.error('Request failed.');
            };

            xhr.send();
        });
    </script>
</body>
</html>

Sep 18, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!