CODEWITHSUNDEEP
javascriptjqueryarraysjsondom
Khpalwalk
Khpalwalk

Reputation: 981

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.

Upvotes: 0

Views: 38

Answers (2)

LazyDeveloper
LazyDeveloper

Reputation: 619

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);
  };

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Try this function:

function displayListItems(item) {
var ret = '';
$.each(item,function(i,v){
ret+='<li class="collection-item">'+v+'</li>'
})
return ret;
};

Upvotes: 2

Related Questions