JavaScript Object: how to dynamically retrieve only key value pairs that are not null

Question

given the question you know I'm fairly new... I need help with the following: via an api I get each time a different object, the like of which is included below. Each object has 'ingredients' stored in strings such as: strIngredient1, strIngredient2, etc. Now not all of the strings have value as in this key-value pair: ("strIngredient5": null). How do I manage to get only the strings that are not null? Given that I don't know in advance how many strIngredients my object will have? And also given that each strIngredient has a different suffix number?

[{
    "idDrink": "11007",
    "strDrink": "Margarita",
    "strDrinkAlternate": null,
    "strDrinkES": null,
    "strDrinkDE": null,
    "strDrinkFR": null,
    "strDrinkZH-HANS": null,
    "strDrinkZH-HANT": null,
    "strTags": "IBA,ContemporaryClassic",
    "strVideo": null,
    "strCategory": "Ordinary Drink",
    "strIBA": "Contemporary Classics",
    "strAlcoholic": "Alcoholic",
    "strGlass": "Cocktail glass",
    "strInstructions": "Rub the rim of the glass with the lime slice to make the salt stick to it. Take care to moisten only the outer rim and sprinkle the salt on it. The salt should present to the lips of the imbiber and never mix into the cocktail. Shake the other ingredients with ice, then carefully pour into the glass.",
    "strInstructionsES": null,
    "strInstructionsDE": "Reiben Sie den Rand des Glases mit der Limettenscheibe, damit das Salz daran haftet. Achten Sie darauf, dass nur der äußere Rand angefeuchtet wird und streuen Sie das Salz darauf. Das Salz sollte sich auf den Lippen des Genießers befinden und niemals in den Cocktail einmischen. Die anderen Zutaten mit Eis schütteln und vorsichtig in das Glas geben.",
    "strInstructionsFR": null,
    "strInstructionsZH-HANS": null,
    "strInstructionsZH-HANT": null,
    "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/5noda61589575158.jpg",
    "strIngredient1": "Tequila",
    "strIngredient2": "Triple sec",
    "strIngredient3": "Lime juice",
    "strIngredient4": "Salt",
    "strIngredient5": null,
    "strIngredient6": null,
    "strIngredient7": null,
    "strIngredient8": null,
    "strIngredient9": null,
    "strIngredient10": null,
    "strIngredient11": null,
    "strIngredient12": null,
    "strIngredient13": null,
    "strIngredient14": null,
    "strIngredient15": null,
    "strMeasure1": "1 1/2 oz ",
    "strMeasure2": "1/2 oz ",
    "strMeasure3": "1 oz ",
    "strMeasure4": null,
    "strMeasure5": null,
    "strMeasure6": null,
    "strMeasure7": null,
    "strMeasure8": null,
    "strMeasure9": null,
    "strMeasure10": null,
    "strMeasure11": null,
    "strMeasure12": null,
    "strMeasure13": null,
    "strMeasure14": null,
    "strMeasure15": null,
    "strImageSource": "https://commons.wikimedia.org/wiki/File:Klassiche_Margarita.jpg",
    "strImageAttribution": "Cocktailmarler",
    "strCreativeCommonsConfirmed": "Yes",
    "dateModified": "2015-08-18 14:42:59"
  }]

Thank you for explaining in beginner-friendly terms.

@JeremyThille thank you for taking the time. Unfortunately I don't get how to filter each key whos value is null. Can you help? — Emmanuel, Feb 03 '21 at 18:38
I think this post might help you : https://stackoverflow.com/questions/286141/remove-blank-attributes-from-an-object-in-javascript — Jeremy Thille, Feb 03 '21 at 18:40

score 1 · Accepted Answer · answered Feb 03 '21 at 19:05

What you can do is you can convert the object to an array with a key value pair using:

const tempArray = Object.entries(arr[0]);

So this will convert the object to a nested array:

[[key, value], [key, value], [key, value], ... ]

And then use the .filter array operator so that you can remove all of the values that are null:

const filteredArray = tempArray.filter(([key, value]) => value !== null );

And finally, you can convert back to an object using the fromEntries method of the Object class.

const filteredObj = Object.fromEntries(filteredArray);

JavaScript Object: how to dynamically retrieve only key value pairs that are not null

1 Answers1