forLoop and create json file for each iteration

Question

I've pieced together a script that gets data from an API.

I can successfully return the data, manipulate it and create the exact object I need. (newMeal)
I can write out the object to the console in a for loop and each object output is distinct and what I need.

I am now passing the object to a function that creates a json file of the object.

My function does create a json file, but only of the last object sent to it.

I know that this is a matter of moving the function to the correct location, but I've tried everywhere and I can't figure it out.

<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

Move the download function outside of the for loop and that should work and store all the newMeal in array and finally pass the array to the download function.

 $(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 and create json file for each iteration

Question

1 answers

solution1
0 ACCPTED 2018-09-22 16:19:33

forLoop and create json file for each iteration

Question

1 answers

solution1 0 ACCPTED 2018-09-22 16:19:33

solution1
0 ACCPTED 2018-09-22 16:19:33