Khpalwalk Khpalwalk - 7 months ago 11
Javascript Question

Getting commas with list item looped to the DOM?

Hey guys searched a lot regarding this particular problem of mine which prints out the commas after the items are looped over using the map func to the dom. I tried replace, join, slice, gsub and nothing seems to work for me.

Here is the DATA for the items.

let recipesData = [
{
"recipeName": 'Pumpkin Pie',
"ingredients": ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']
},
{
"recipeName": 'Apple Pie',
"ingredients": ['Apple Puree', 'Sweetened Creamy Milk', 'Eggs', 'Apple Pie Spice', 'Pie Crust']
},
{
"recipeName": 'Milk Shake',
"ingredients": ['Dried Fruits', 'Creamy Milk', 'Fruits', 'Muscile Suppliment']
}
];


Here is the loop func:

const displayListItems = items => items.map(item => `<li class="collection-item">${item.replace(/,/g , "")}</li>`);

const displayRecipes = recipes => {
const displayIt = recipes.map(recipe => {
return `<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>${recipe.recipeName}</div>
<div class="collapsible-body list-items">
<ul class="collection with-header">
<li class="collection-header"><h4>Ingredients</h4></li>
${displayListItems(recipe.ingredients)}
</ul>
<a class="waves-effect waves-light btn delete">Delete</a>
<a class="waves-effect waves-light btn default edit-item" href="#model2">Edit</a>
</div>
</li>`
});
$('.data-here').html(displayIt);
};


And finally here I'm passing the recipesData to the displayRecipes func:

displayRecipes(recipesData);


Here is the result after looping through one object in the data.

<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Pumpkin Pie</div>
<div class="collapsible-body list-items">
<ul class="collection with-header">
<li class="collection-header"><h4>Ingredients</h4></li>
<li class="collection-item">Pumpkin Puree</li>,<li class="collection-item">Sweetened Condensed Milk</li>,<li class="collection-item">Eggs</li>,<li class="collection-item">Pumpkin Pie Spice</li>,<li class="collection-item">Pie Crust</li>
</ul>
<a class="waves-effect waves-light btn delete">Delete</a>
<a class="waves-effect waves-light btn default edit-item" href="#model2">Edit</a>
</div>
</li>


You see those commas after each , those are my problem.

Thanks a bunch if anyone helps.

Answer

added join in the template

    const displayRecipes = recipes => {
    const displayIt = recipes.map(recipe => {
    return `<li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>${recipe.recipeName}</div>
      <div class="collapsible-body list-items">
        <ul class="collection with-header">
          <li class="collection-header"><h4>Ingredients</h4></li>
          ${displayListItems(recipe.ingredients).join('')}
        </ul>
        <a class="waves-effect waves-light btn delete">Delete</a>
        <a class="waves-effect waves-light btn default edit-item" href="#model2">Edit</a>
      </div>
    </li>`
   });
    $('.data-here').html(displayIt);
  };
Comments