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 4 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 4 tahun yang lalu

Tanggapan

makasih gan

@nogi

Kelas Premium! Belajar bikin website dari nol sekarang

Kelas Premium! Belajar Javascript untuk website

gagal fetch web API

Kelas Premium!
Belajar bikin website dari nol sekarang

Kelas Premium!
Belajar Javascript untuk website