Scribd Logo
Upload

Welcome to Scribd!

  • PRACTICAL7

    Uploaded by

    Sakshi Sharma
    5 views5 pages
    This document contains code to load JSON pet data from a file called pets.json using AJAX. The pet data is displayed in a presentable way on the page using HTML and CSS. The JSON data is loaded on page load and the displayPets function loops through the data to create HTML elements for each pet's name, species and age, which are then appended to the #pets-container div.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code to load JSON pet data from a file called pets.json using AJAX. The pet data is displayed in a presentable way on the page using HTML and CSS. The JSON data is loaded on page load and the displayPets function loops through the data to create HTML elements for each pet's name, species and age, which are then appended to the #pets-container div.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views5 pages

    PRACTICAL7

    Uploaded by

    Sakshi Sharma
    This document contains code to load JSON pet data from a file called pets.json using AJAX. The pet data is displayed in a presentable way on the page using HTML and CSS. The JSON data is loaded on page load and the displayPets function loops through the data to create HTML elements for each pet's name, species and age, which are then appended to the #pets-container div.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    SAKSHI SHARMA

    21/5005
    PRACTICAL-7
    Store JSON data of few pets that you
    created in previous practical in a JSON
    file (copy from console output of previous
    program to a .json file). Using AJAX, load
    data from the file and display it in a
    presentable way using HTML and CSS.

    Code for the following question:-

    HTML
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Pets Information</title>

    </head>

    <body>

    <div id="pets-container"></div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="script.js"></script>

    </body>

    </html>

    CSS
    #pets-container {

    max-width: 600px;

    margin: 20px auto;

    .pet {

    border: 1px solid #ccc;

    padding: 10px;

    margin-bottom: 10px;

    border-radius: 5px;

    .pet h2 {

    margin-top: 0;

    .pet p {

    margin-bottom: 5px;

    JAVASCRIPT
    $(document).ready(function() {

    $.ajax({

    url: 'pets.json',

    type: 'GET',

    dataType: 'json',

    success: function(data) {

    displayPets(data);

    },

    error: function() {

    console.log('Error loading JSON file');

    });

    function displayPets(pets) {

    var petsContainer = $('#pets-container');

    pets.forEach(function(pet) {

    var petDiv = $('<div class="pet">');

    petDiv.append('<h2>' + pet.name + '</h2>');

    petDiv.append('<p>Species: ' + pet.species + '</p>');

    petDiv.append('<p>Age: ' + pet.age + ' years</p>');

    petsContainer.append(petDiv);

    });

    });
    A.

    You might also like