JavaScript调用MealDB API

迷南。 2023-10-01 16:15 2阅读 0赞

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>
        
        <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>
    
        
        <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>
    
        
        <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);
        }
    }

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

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 }
      ]
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 API调用困惑：使用Java进行RESTful API调用

在Java中调用RESTful API通常涉及到使用HTTP客户端库来发送请求和接收响应。以下是一些常见的步骤和工具，可以帮助你理解如何进行RESTful API调用： ##

深藏阁楼爱情的钟/ 2024年11月11日 17:42/ 0 赞/ 37 阅读

相关 API调用：Java开发中如何正确调用外部API

在Java开发中调用外部API是一个常见的需求，可以通过多种方式实现。以下是一些基本步骤和最佳实践，帮助你正确地调用外部API： ###1.选择合适的HTTP客户端库Java

今天药忘吃喽~/ 2024年11月08日 16:15/ 0 赞/ 39 阅读

相关 API调用困惑：Java RESTful API开发和调用

在Java中进行RESTful API的开发和调用，通常会遵循以下几个步骤： 1. **需求分析**：确定API的功能，例如增删查改等，并设计相应的接口文档。 2.

约定不等于承诺〃/ 2024年10月17日 13:24/ 0 赞/ 81 阅读

相关 JavaScript调用MealDB API

index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars

迷南。/ 2023年10月01日 16:15/ 0 赞/ 3 阅读

相关 javascript调用百度地图api

百度地图提供sdk,javascript api等多种客户端调用方式，通常在网页上用的比较多，也就是javascript api，这里根据自己的使用，简单介绍一下如何快

布满荆棘的人生/ 2023年06月30日 13:59/ 0 赞/ 80 阅读

相关 flutter调用api_如何在Flutter（REST API）中进行API调用

flutter调用api 在本文中，我们将看一下如何快速进行API调用并使用简单的REST API。在这里查看我在Flutter上的其他一些帖子： [Flutte

心已赠人/ 2023年02月25日 07:01/ 0 赞/ 42 阅读

相关 nginx代理grafana实现javascript调用 HTTP API

nginx代理grafana实现javascript调用 HTTP API Nginx 配置 location / {

柔光的暖阳◎/ 2022年12月02日 00:43/ 0 赞/ 93 阅读

相关 java调用javascript函数_Java调用javascript函数

Java中自带库函数中有ScriptEngine可以支持javascript等script文件 ScriptEngineManager manager = new Scrip

墨蓝/ 2022年11月07日 14:59/ 0 赞/ 273 阅读

相关 lotus api 调用

lotus https://github.com/filecoin-project/lotus lotus 基本文档 https://docs.lotu.sh/

不念不忘少年蓝@/ 2022年10月17日 04:12/ 0 赞/ 165 阅读

相关 JavaScript API

[W3Cschool JavaScript API 速查词典][W3Cschool JavaScript API] \- 速查 [W3school JavaScript 参考

男娘i/ 2022年05月22日 02:46/ 0 赞/ 151 阅读