JavaScript调用MealDB API

Question

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TheMealDb</title>
    <!-- Css Link -->
    <link href="bootstrap.min.css" rel="stylesheet" >
</head>

<body class="p-4">
    <h2 class="text-center mt-3 text-success">Welcome To Food Search</h2>

    <!-- searchBar -->
    <div class="input-group mb-3 w-50 mx-auto">
        <input id="search-item" type="text" class="form-control" placeholder="Search Your Food"
            aria-label="Recipient's username" aria-describedby="button-addon2">
        <button onclick="searchFood()" class="btn btn-outline-secondary" type="button"
            id="button-search">Search</button>
    </div>

    <!-- Search result card -->
    <div id="search-result" class="row row-cols-1 row-cols-md-4 g-4 mt-5">

    </div>

    <script src="bootstrap.bundle.min.js" ></script>

    <script src="app.js"></script>
</body>

</html>

app.js

const searchFood = () => {
    //input theke search item khuje ana
    const searchiteam = document.getElementById('search-item');
    const searchText = searchiteam.value;
    // console.log(searchText);
    searchiteam.value = '';

    //Api Call
    const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchText}`;
    fetch(url)
        .then(response => response.json())
        .then(data => displayMeals(data.meals));
}

const displayMeals = meals => {
    console.log(meals);
    const searchResult = document.getElementById("search-result");
    for (const meal of meals) {
        console.log(meal);
        const div = document.createElement('div');
        div.classList.add('col');
        div.innerHTML = `
        <div class="card card border-danger mb-4">
                <img src=${meal.strMealThumb} class="card-img-top" alt="">
                <div class="card-body card text-white bg-secondary">
                    <h5 class="card-title card text-white bg-dark p-2">${meal.strMeal}</h5>
                    <p class="card-text">
                    ${meal.strInstructions}
                    </p>
                </div>
            </div>
        `;
        searchResult.appendChild(div);
    }
}

Answer 1

在浏览器控制台中试试这个：

Answer 2

fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> console.log(data))

你会看到这样的最终结果：

{
  meals: [
    { // meal 1 },
    { // meal 2 },
    { // meal 3 },
    { // meal 4 }
  ]
}