გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

fetch api ჯავასკრიპტში

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

ჯავასკრიპტში fetch api გვაძლევს საშუალებას დავამყაროთ კავშირი ბექენდთან api-ის დახმარებით, რაც საშუალებას გვაძლევს ფრონტენდში გამოვიტანოთ დინამიური მონაცემები, რომელსაც ბექენდი დაგვიბრუნებს.

ქვემოთ მოცემული კოდი არის ვიდეოში განხილული მაგალითი

const getUsers = async () => {
    try {
        const ul = document.querySelector('ul');
        const users = await fetch('../db/users.json').then(_ => _.json())
        
        users.forEach(user => {
            const li = document.createElement('li');
            li.innerText = `${user.first_name} ${user.last_name}`;
            ul.appendChild(li);
        });
    } catch (error) {
        console.log(error)
    }
}

getUsers();

კურსში შემავალი თემები

კომენტარები 2

ვალერი ხარიტონაშვილი
02/06/2022, 04:12:13

@nika

ხო სწორად მიხვდი

nika nakopia
02/06/2022, 03:52:16

სალამი.

ul.appenchild() ფრჩხილებშ მოთავსებული ნებისმიერი რამ, მაგალითად li - ს ვეუბნებით, რომ ის იქნება ul ის შვილი, და მასში იქნება მოთავსებული.

ეგაა ლოგიკა ამის?  

რა არის ჯავასკრიპტი (javascript)? ცვლადები ჯავასკრიპტში (JavaScript variables) JavaScript-ის მონაცემთა ტიპები string, number JavaScript-ის კომენტარები JavaScript-ის მონაცემთა ტიპი ობეიქტი JavaScript-ის მონაცემთა ტიპი მასივი (Array) JavaScript-ის ფუნქცია, როგორ მუშაობს ის? JavaScript-ის ანონიმური ფუნცქცია JavaScript-ის arrow function JavaScript-ის მონაცემთა ტიპი boolean JavaScript-ის შედარებითი და ლოგიკური ოპერატორები JavaScript-ის პირობითი ოპერატორები, if() else if() else JavaScript-ის switch ოპერატორი JavaScript-ის for ციკლი (loop) JavaScript-ის for...in ციკლი JavaScript-ის for...of ციკლი JavaScript-ის while და do while ციკლები JavaScript-ის break და continue ოპერატორები JavaScript-ის foreach ციკლი JavaScript-ის სახელების შეთანხმებები JavaScript-ის მეთოდი vs ფუნქცია JavaScript-ის Set მეთოდი JavaScript-ის კლასები, ნაწილი პირველი რა არის ჯეისონი (JSON) JavaScript-ის კლასები, ნაწილი მეორე JavaScript-ის მოდულები ობიექტის დესტრუქტურიზაცია (object destructuring) რა არის callback ფუნქცია ჯავასკრიპტში ჯავასკრიპტის მასივის მეთოდები, ნაწილი პირველი ჯავასკრიპტის მასივის მეთოდები, ნაწილი მეორე ჯავასკრიპტის filter() მეთოდი ასინქრონული ჯავასკრიპტი, JavaScript Promises async await, ასინქრონული ჯავასკრიპტი fetch api ჯავასკრიპტში მასივის map() მეთოდი მასივის reduce() მეთოდი localStorage ჯავასკრიპტში Spread ოპერატორი ჯავასკრიპტში rest ოპერატორი ჯავასკრიპტის ფუნქციაში რა არის indexOf() მეთოდი ჯავასკრიპტში? რა არის charAt() მეთოდი ჯავასკრიპტში? რა არის push() მეთოდი ჯავასკრიპტში? რა არის pop() მეთოდი ჯავასკრიპტში? რა არის unshift() მეთოდი ჯავასკრიპტში? რა არის shift() მეთოდი ჯავასკრიპტში? Ternary ოპერატორი ჯავასკრიპტში (JavaScript)