0

我正在尝试使用来自 JSON 的数据动态填充 div，但希望避免重复。下面的脚本会给我 3 个 div，2 个“标准”和一个“特殊”。

如何在不创建重复 div 的情况下实现？

var productList = [ 
   { 
        model:"helskap",
        type:"special",
        family:"Bravo"
   },
   { 
        model:"Z-skap",
        type:"standard",
        family:"Valhalla"
    },
    { 
        model:"smafacksskap",
        type:"standard",
        family:"Jona"
   }

];

$.each(productList, function(i, item) {     
    $('.filter').append('<div class="' + productList[i].type+ '"><input type="radio" name="type" value="' + productList[i].type+ '" /><label>' + productList[i].type+ '</label></div>')
}); 

<div class"filter"></div>
4

2 回答 2

2

更好的方法是首先获取属性上具有唯一对象的数组，type然后您可以使用新的过滤数组进行渲染，如下所示filterProductList：

var productList = [{
    model: "helskap",
    type: "special",
    family: "Bravo"
  },
  {
    model: "Z-skap",
    type: "standard",
    family: "Valhalla"
  },
  {
    model: "smafacksskap",
    type: "standard",
    family: "Jona"
  }

];

var filterProductList = productList.reduce((acc, item) => {
  var existItem = acc.find(({type}) => type === item.type);
  if (!existItem) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(filterProductList);

然后用于filterProductList在您的页面中呈现 HTML。您的代码将如下所示：

$.each(filterProductList, function(i, item) {  
  var type = filterProductList[i].type;
  $('.filter').append('<div class="' + type + '"><input type="radio" name="type" value="' + type + '" /><label>' + type + '</label></div>')
});
于 2020-02-06T07:47:25.323 回答
0

我认为简单的方法是创建每个div，id="type"然后将内容附加到div id="type".

于 2020-02-06T07:58:55.103 回答