Question

我拼凑了一个从API获取数据的脚本。

我可以成功返回数据，对其进行操作并创建我需要的确切对象。（newMeal）
我可以在for循环中将对象写到控制台，每个对象对象输出与众不同，正是我所需要的。

我现在将对象传递给创建该对象的json文件的函数。

我的函数做创建一个json文件，但仅包含最后一个对象发送给它。

我知道这是将函数移到正确位置的问题，但是我已经在所有地方进行了尝试，但无法弄清楚。

<html>
<head>
</head>
<body>
<button id="download">Download me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#download').on("click", function() {
var url = "https://www.themealdb.com/api/json/v1/1/latest.php";   
        $.ajax({
            type: "GET",
            dataType : 'json',
            url: url,
            success: function(response) {               
            for(meals in response) {
                    var meals = response[meals];
                    counter = 1
                    var newMeal = {}
                    for(meal in meals) {
                        var meal = meals[meal];                 
                        ingred1 = meal.strMeasure1 + ' ' + meal.strIngredient1;
                        ingred2 = meal.strMeasure2 + ' ' + meal.strIngredient2;
                        ingred3 = meal.strMeasure3 + ' ' + meal.strIngredient3;
                        ingred4 = meal.strMeasure4 + ' ' + meal.strIngredient4;                     
                        ingred5 = meal.strMeasure5 + ' ' + meal.strIngredient5;
                        ingred6 = meal.strMeasure6 + ' ' + meal.strIngredient6;
                        ingred7 = meal.strMeasure7 + ' ' + meal.strIngredient7;
                        ingred8 = meal.strMeasure8 + ' ' + meal.strIngredient8;
                        ingred9 = meal.strMeasure9 + ' ' + meal.strIngredient9;
                        ingred10 = meal.strMeasure10 + ' ' + meal.strIngredient10;
                        ingred11 = meal.strMeasure11 + ' ' + meal.strIngredient11;
                        ingred12 = meal.strMeasure12 + ' ' + meal.strIngredient12;
                        ingred13 = meal.strMeasure13 + ' ' + meal.strIngredient13;
                        ingred14 = meal.strMeasure14 + ' ' + meal.strIngredient14;
                        ingred15 = meal.strMeasure15 + ' ' + meal.strIngredient15;
                        ingred16 = meal.strMeasure16 + ' ' + meal.strIngredient16;
                        ingred17 = meal.strMeasure17 + ' ' + meal.strIngredient17;
                        ingred18 = meal.strMeasure18 + ' ' + meal.strIngredient18;
                        ingred19 = meal.strMeasure19 + ' ' + meal.strIngredient19;
                        var ingred =[];
                        ingred.push.apply(ingred, [ingred1,ingred2,ingred3,ingred4,ingred5,ingred6,ingred7,ingred8,ingred9,ingred10,ingred11,ingred12,ingred13,ingred14,ingred14,ingred15,ingred16,ingred17,ingred18,ingred19])

                        newMeal = {
                        author: 123,
                        name: meal.strMeal,
                        description: "www",
                        category: meal.strCategory,
                        cusine: meal.strArea,
                        ingredients:
                            ingred,
                        instructions: [
                            meal.strInstructions
                            ],
                        image_url: meal.strMealThumb,   
                        };
                        console.log(newMeal);

                        //FUNCTION TO CREATE JSON FILE
                        function download() {
                        var fileContents=JSON.stringify(newMeal, null, 2);
                        var fileName= "data.json";
                        var pp = document.createElement('a');
                        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
                        pp.setAttribute('download', fileName);
                        pp.click();
                        }
                        setTimeout(function() {download()}, 500);                       
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {       
            } 
        });         
    });
});
</script>
</body>
</html>

Answer 1

将下载函数移至for循环之外，该函数应该可以工作并将所有newMeal存储在数组中，最后将数组传递给download函数。

$(document).ready(function() {
var allMeals = [];
    $('#download').on("click", function() {
    //console.log(1)
        var url = "https://www.themealdb.com/api/json/v1/1/latest.php";
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: url,
            success: function(response) {
              var newMeal = {};
                for (meals in response) {
                    var meals = response[meals];
                    counter = 1

                    for (meal in meals) {
                        var meal = meals[meal];
                        ingred1 = meal.strMeasure1 + ' ' + meal.strIngredient1;
                        ingred2 = meal.strMeasure2 + ' ' + meal.strIngredient2;
                        ingred3 = meal.strMeasure3 + ' ' + meal.strIngredient3;
                        ingred4 = meal.strMeasure4 + ' ' + meal.strIngredient4;
                        ingred5 = meal.strMeasure5 + ' ' + meal.strIngredient5;
                        ingred6 = meal.strMeasure6 + ' ' + meal.strIngredient6;
                        ingred7 = meal.strMeasure7 + ' ' + meal.strIngredient7;
                        ingred8 = meal.strMeasure8 + ' ' + meal.strIngredient8;
                        ingred9 = meal.strMeasure9 + ' ' + meal.strIngredient9;
                        ingred10 = meal.strMeasure10 + ' ' + meal.strIngredient10;
                        ingred11 = meal.strMeasure11 + ' ' + meal.strIngredient11;
                        ingred12 = meal.strMeasure12 + ' ' + meal.strIngredient12;
                        ingred13 = meal.strMeasure13 + ' ' + meal.strIngredient13;
                        ingred14 = meal.strMeasure14 + ' ' + meal.strIngredient14;
                        ingred15 = meal.strMeasure15 + ' ' + meal.strIngredient15;
                        ingred16 = meal.strMeasure16 + ' ' + meal.strIngredient16;
                        ingred17 = meal.strMeasure17 + ' ' + meal.strIngredient17;
                        ingred18 = meal.strMeasure18 + ' ' + meal.strIngredient18;
                        ingred19 = meal.strMeasure19 + ' ' + meal.strIngredient19;
                        var ingred = [];
                        ingred.push.apply(ingred, [ingred1, ingred2, ingred3, ingred4, ingred5, ingred6, ingred7, ingred8, ingred9, ingred10, ingred11, ingred12, ingred13, ingred14, ingred14, ingred15, ingred16, ingred17, ingred18, ingred19])

                        newMeal = {
                            author: 123,
                            name: meal.strMeal,
                            description: "www",
                            category: meal.strCategory,
                            cusine: meal.strArea,
                            ingredients: ingred,
                            instructions: [
                                meal.strInstructions
                            ],
                            image_url: meal.strMealThumb,
                        };
                        //console.log(newMeal);
                        allMeals.push(newMeal);
                    }
                }
                download(allMeals);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {}
        });
    });
});

//FUNCTION TO CREATE JSON FILE
function download(meal) {

console.log(meal);
    var fileContents = JSON.stringify(meal, null, 2);
    var fileName = "data.json";
    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.click();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="download">click</button>

forLoop并为每次迭代创建json文件

1 个答案: