Push objects into an array programatically

Question

I am Building a simple recipes app and I am fetching the recipes from an API.

I am having a little bit of trouble with the ingredients and their measures.

This is what I am getting from the API:

(You can use postman or something similar to see the data from this link https://www.themealdb.com/api/json/v1/1/lookup.php?i=52773)

            "strIngredient1": "Salmon",
            "strIngredient2": "Olive oil",
            "strIngredient3": "Soy Sauce",
            "strIngredient4": "Sake",
            "strIngredient5": "Sesame Seed",
            "strIngredient6": "",
            "strIngredient7": "",
            "strIngredient8": "",
            "strIngredient9": "",
            "strIngredient10": "",
            "strIngredient11": "",
            "strIngredient12": "",
            "strIngredient13": "",
            "strIngredient14": "",
            "strIngredient15": "",
            "strIngredient16": null,
            "strIngredient17": null,
            "strIngredient18": null,
            "strIngredient19": null,
            "strIngredient20": null,
            "strMeasure1": "1 lb",
            "strMeasure2": "1 tablespoon",
            "strMeasure3": "2 tablespoons",
            "strMeasure4": "2 tablespoons",
            "strMeasure5": "4 tablespoons",
            "strMeasure6": "",
            "strMeasure7": "",
            "strMeasure8": "",
            "strMeasure9": "",
            "strMeasure10": "",
            "strMeasure11": "",
            "strMeasure12": "",
            "strMeasure13": "",
            "strMeasure14": "",
            "strMeasure15": "",
            "strMeasure16": null,
            "strMeasure17": null,
            "strMeasure18": null,
        "strMeasure19": null,
        "strMeasure20": null,

How can I create an array from this data I am getting?

Ideally I would like to have an array like this [1 lb Salmon, 2 tablespoons Olive oil, 2 tablespoons Soy Sauce]...

Is there a good way to do this or do i have to hardcode it like this : [strIngredient1,StrMeasure1] etc...

which way is the best way to do this ?

Thank you in advance.

Does this answer your question? [Parse JSON in JavaScript?](https://stackoverflow.com/questions/4935632/parse-json-in-javascript) — Justinas, Mar 04 '21 at 13:17
The method below by @Rinor worked for me, Thank you for your comment Justinas — Why u do dis, Mar 04 '21 at 13:31

score 2 · Accepted Answer · answered Mar 04 '21 at 13:21

First I think the api should be fixed otherwise I see that there are only 20 ingredients allowed and they are matched with indexes; you can do something like this

const ingredients = [];

for(let i=1; i <= 20; i++ ) {
    if(data[`strMeasure${i}`]) {
        let item = [ data[`strMeasure${i}`] + " " +  data[`strIngredient${i}`]  ]
        ingredients.push(item)  
    }
}

score 1 · Answer 2 · answered Mar 04 '21 at 13:24

Make Ajax request to API, then simply read response JSON.

It seems that there is max 20 parts, so read from 1st to 20th element in loop

$(document).ready(function(){
  $.ajax({
      url: 'https://www.themealdb.com/api/json/v1/1/lookup.php?i=52773',
      type: 'GET',
      dataType: 'json',
      success: function (response) {
          var list = $('#list');
          
          for (var i = 1; i <= 20; i++) {
              measure = response.meals[0]['strMeasure' + i];
              
              
              if (measure == '' || measure == null) {
                  continue;
              }

              list.append(
                '<li>' + measure + ' ' + response.meals[0]['strIngredient' + i] +'</li>'
              );
          }
      }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ol id="list">

</ol>

kiranvj · Answer 3 · 2021-03-04T13:45:01.823

If the ingredient count is not fixed(count vary with different dishes right?), try the below approach. Filter out null and empty strings if needed.

let data = {

  "idMeal": "52773",
  "strMeal": "Honey Teriyaki Salmon",
  "strDrinkAlternate": null,
  "strCategory": "Seafood",
  "strArea": "Japanese",
  "strInstructions": "Mix all the ingredients in the Honey Teriyaki Glaze together. Whisk to blend well. Combine the salmon and the Glaze together.\r\n\r\nHeat up a skillet on medium-low heat. Add the oil, Pan-fry the salmon on both sides until it\u2019s completely cooked inside and the glaze thickens.\r\n\r\nGarnish with sesame and serve immediately.",
  "strMealThumb": "https:\/\/www.themealdb.com\/images\/media\/meals\/xxyupu1468262513.jpg",
  "strTags": "Fish,Breakfast,DateNight",
  "strYoutube": "https:\/\/www.youtube.com\/watch?v=4MpYuaJsvRw",
  "strIngredient1": "Salmon",
  "strIngredient2": "Olive oil",
  "strIngredient3": "Soy Sauce",
  "strIngredient4": "Sake",
  "strIngredient5": "Sesame Seed",
  "strIngredient6": "",
  "strIngredient7": "",
  "strIngredient8": "",
  "strIngredient9": "",
  "strIngredient10": "",
  "strIngredient11": "",
  "strIngredient12": "",
  "strIngredient13": "",
  "strIngredient14": "",
  "strIngredient15": "",
  "strIngredient16": null,
  "strIngredient17": null,
  "strIngredient18": null,
  "strIngredient19": null,
  "strIngredient20": null,
  "strMeasure1": "1 lb",
  "strMeasure2": "1 tablespoon",
  "strMeasure3": "2 tablespoons",
  "strMeasure4": "2 tablespoons",
  "strMeasure5": "4 tablespoons",
  "strMeasure6": "",
  "strMeasure7": "",
  "strMeasure8": "",
  "strMeasure9": "",
  "strMeasure10": "",
  "strMeasure11": "",
  "strMeasure12": "",
  "strMeasure13": "",
  "strMeasure14": "",
  "strMeasure15": "",
  "strMeasure16": null,
  "strMeasure17": null,
  "strMeasure18": null,
  "strMeasure19": null,
  "strMeasure20": null,
  "strSource": null,
  "strImageSource": null,
  "strCreativeCommonsConfirmed": null,
  "dateModified": null

}

// get the ingredient count
let count = Object.keys(data).filter(item => item.startsWith('strIngredient')).length;

//console.log(count);

let foodArray = [];

for (var i = 0; i < count; i++) {
  foodArray.push(data[`strMeasure${i + 1}`] + ' ' + data[` strIngredient${i + 1}`]);
}

console.log(foodArray);

score 1 · Answer 4 · answered Mar 04 '21 at 13:49

Try with this code:

const list = {
    "strIngredient1": "Salmon",
    "strIngredient2": "Olive oil",
    "strIngredient3": "Soy Sauce",
    "strIngredient4": "Sake",
    "strIngredient5": "Sesame Seed",
    "strIngredient6": "",
    "strIngredient7": "",
    "strIngredient8": "",
    "strIngredient9": "",
    "strIngredient10": "",
    "strIngredient11": "",
    "strIngredient12": "",
    "strIngredient13": "",
    "strIngredient14": "",
    "strIngredient15": "",
    "strIngredient16": null,
    "strIngredient17": null,
    "strIngredient18": null,
    "strIngredient19": null,
    "strIngredient20": null,
    "strMeasure1": "1 lb",
    "strMeasure2": "1 tablespoon",
    "strMeasure3": "2 tablespoons",
    "strMeasure4": "2 tablespoons",
    "strMeasure5": "4 tablespoons",
    "strMeasure6": "",
    "strMeasure7": "",
    "strMeasure8": "",
    "strMeasure9": "",
    "strMeasure10": "",
    "strMeasure11": "",
    "strMeasure12": "",
    "strMeasure13": "",
    "strMeasure14": "",
    "strMeasure15": "",
    "strMeasure16": null,
    "strMeasure17": null,
    "strMeasure18": null,
    "strMeasure19": null,
    "strMeasure20": null,
};
const measures = Object.entries(list).filter(i => i[0].startsWith('strMeasure'));
const ingredients = Object.entries(list).filter(i => i[0].startsWith('strIngredient'));
const result = measures.map((i, k) => [i[1] + ' ' + ingredients[k][1]]);

What I'm doing is:

Store data into a list (object).
Filter all measures by starting word.
Filter all ingredients by starting word.
Create a new array which combines a measure and an ingredient.

This is all possible when you have the same number of measures/ingredients. Otherwise it'll become a little buggy.

Push objects into an array programatically

4 Answers4