Question

嘿家伙们对我的这个特殊问题进行了很多搜索，在使用map func到dom的项目循环之后打印出逗号。我尝试了替换，加入，切片，gsub，似乎没有什么对我有用。

这是项目的DATA。

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']
  }
];

这是循环函数：

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

最后，我将recipesData传递给displayRecipes func：

displayRecipes(recipesData);

这是循环遍历数据中一个对象后的结果。

<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>

你看到每个后面都有这些逗号，这些都是我的问题。

如果有人帮忙的话，非常感谢。

Answer 1

尝试此功能：

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

Answer 2

在模板中添加了加入

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

获取带有循环到DOM的列表项的逗号？

2 个答案: