gagal fetch web API

gan mau nanya ini saya tuh lagi bikin aplikasi web pencari resep makanan.

ini kenapa yah saya gagal fetch API mulu?padahal udh di cek berkali-kali masih tetep gk ke ambil datanya.mohon koreksinya klo ada yg salah soalnya masih newbie..

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Delicious Meal</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav-bar></nav-bar>
        <meal-list></meal-list>
        <script src="./src/component/header.js"></script>
        <script src="./src/component/meal-list.js"></script>
        <script src="./src/component/meal-item.js"></script>
        <script src="./src/script/data/SearchData.js"></script>
        <script src="./src/main.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    </body>
</html>

header.js

class Navbar extends HTMLElement {
    connectedCallback(){
        this.render();
    }

    set clickEvent(event){
        this._clickEvent = event;
        this.render();
    }

    get value(){
        return this.querySelector("#searchItems").value;
    }

    render(){
        this.innerHTML = `
        <nav class="navbar navbar-light bg-primary">
            <a class="navbar-brand">Delicious Meal</a>
            <form class="form-inline">
                <input class="form-control mr-sm-2" type="search" placeholder="Cari Resep Makanan" aria-label="Search" id="searchItems">
                <button class="btn btn-outline-success my-2 my-sm-0" id="buttonSearch" type="submit">Cari</button>
            </form>
        </nav>
        `;
        this.querySelector("#buttonSearch").addEventListener("click",this._clickEvent);
    }
}

customElements.define("nav-bar",Navbar);

meal-list.js

class MealList extends HTMLElement{
    set meals(meals){
        this._meals = meals;
        this.render();
    }

    renderError(message){
        this.innerHTML += `
            <h2>${message}</h2>
        `;
    }

    render(){
        this.innerHTML = "";
        this._meals.forEach(meal => {
            const mealItem = document.createElement("meal-item");
            mealItem.meal = meal;
            this.appendChild(mealItem);
        });
    }
}

customElements.define("meal-list",MealList);

meal-item.js

class MealItem extends HTMLElement{
    set meals(meal){
        this._meal = meal;
        this.render();
    }

    render(){
        this.innerHTML = `
        <div class=meal-item>
            <img src=${this._meal.strMealThumb} alt="">
            <h3>${this._meal.strMeal}</h3>
            <p>Alat dan Bahan</p>
            <ul>
                <li>${this._meal.strIngredients}</li>
            </ul>
            <p>Langkah-langkah</p>
            <ul>
                <li>${this._meal.strInstructions}</li>
            </ul>
        </div>
        `;
    }
}

customElements.define("meal-item",MealItem);

SearchData.js

class SearchData{
    static SearchMeal(keyword){
        return fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${keyword}`)
        .then(res =>{
            return res.json();
        })
        .then(resJson =>{
            if(resJson.meals){
                return Promise.resolve(console.log(resJson.meals));
            }
            else{
                return Promise.reject(console.log(`${keyword} tidak ditemukan`));
            }
        });
    }
}

main.js

const main = () =>{
    const searchMealElement = document.querySelector("nav-bar");
    const mealList = document.querySelector("meal-list");

    const searchClicked = () =>{
        SearchData.SearchMeal(searchMealElement.value)
            .then(successResult)
            .catch(failResult)
    }

    const successResult = result => {
        mealList.meals = result;
    }

    const failResult = message => {
        mealList.renderError(message);
    }

    searchMealElement.clickEvent = searchClicked;
};

app.js

document.addEventListener("DOMContentLoaded",main);

html javascript api

@nogi

21 Kontribusi 2 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

Ada pesan error di konsolnya?

@kodergan

gk ada gan

@nogi

1 Jawaban:

Jawaban Terpilih

<div>file: index.html app.js tidak ada dibawah main.js di-html-nya. file: header.js button (id:buttonSearch) ganti type-nya jadi button. kalau type submit, page akan reload. file: meal-list.js code dalam forEach; property meal itu harusnya meals (karena di compoenent meal-item tidak ada property meal). file: SearchData.js console.log itu tidak ada return value.  Hapus console.log-nya di Promise.resolve dan Promise.reject .</div>

@soeleman

120 Kontribusi 147 Poin

Dipost 3 tahun yang lalu

Tanggapan

makasih gan

@nogi

Kelas Premium! Belajar bikin website dari nol sekarang

gagal fetch web API

Kelas Premium!
Belajar bikin website dari nol sekarang