Taking items from an array and inputting them into innerHTML wrapped in <p></p> and <-CodePudding

I am working with an api called spoonacular.

I search some ingredients and I'm returned an array of objects containing recipes.

I would like to take a variable (the recipe title) from each object and input them into the inner HTML wrapped in

and tags.

The array of objects returned is something like this (this is simplified)

0
: 
{id: 661447, title: 'Square Deviled Eggs', image: 'https://spoonacular.com/recipeImages/661447-312x231.jpg', imageType: 'jpg', usedIngredientCount: 2, …}
1
: 
{id: 638035, title: 'Chicken Cordon Bleu', image: 'https://spoonacular.com/recipeImages/638035-312x231.jpg', imageType: 'jpg', usedIngredientCount: 2, …}
2
: 
{id: 641896, title: 'Easy Chicken Cordon Bleu', image: 'https://spoonacular.com/recipeImages/641896-312x231.jpg', imageType: 'jpg', usedIngredientCount: 2, …}
3
: 
{id: 652359, title: 'Monte Carlo Sandwich', image: 'https://spoonacular.com/recipeImages/652359-312x231.jpg', imageType: 'jpg', usedIngredientCount: 2, …}
4
: 
{id: 663641, title: 'Tomato tarte tatin', image: 'https://spoonacular.com/recipeImages/663641-312x231.jpg', imageType: 'jpg', usedIngredientCount: 2, …}

I currently have the titles input into the page with tags using this code where data is the array of objects:

let recipeTitles = function(){
                return data.map(el => el.title).join('</br>')
            }
            
document.querySelector('#recipeTitle').innerHTML = recipeTitles()

I thought maybe something like

return data.map(el => <p>${el.title}</p>).join('')

return data.map(el => `<p>`${el.title}`</p>`).join('')

Might work, but that is incorrect syntax I think now.

So i can't figure out how to do it.

I haven't tried to input links into the anchor tags yet because I haven't figured out how to add the anchor tags, but I think that part won't be too difficult using the map function?

CodePudding user response：

You're almost there

return data.map(el => `<p>`${el.title}`</p>`).join('')

Is incorrect syntax, but:

return data.map(el => `<p>${el.title}</p>`).join('')

Is not.