Javascript 使用typeahead-loop错误从json创建动态li元素

我使用typeahead.js从json响应中的颜色项创建li元素

Json:

json有一个颜色键，有时是字符串，有时是带有多种颜色的数组

我已经遍历了响应并动态创建了一个html

html += '<li></li>'

html+='
'

我添加了一个条件来检查json中的项是否是颜色数组。 如果它是一个颜色数组，我已经用数组中的颜色替换了尽可能多的li项

我尝试了两种方法： 1.一个是我使html与新的li元素相等，如下所示：

html+='
..

另一个是我将html更改为数组，并将li元素推入其中以替换原始html:

html.push（“
”）

使用方法1，我得到以下结果：

我在一个单独的li中得到所有颜色， 但我也得到了额外的第一个李与颜色如下：

<li class='product-spot__variants-variant' style='background-color:brown,yellow,grey' title='brown,yellow,grey'>'brown,yellow,grey'</li>

'brown，yellow，grey'

使用方法2，我只得到最后一个颜色的li：

<li class='product-spot__variants-variant' style='background-color:grey' title='grey'>'grey'</li>

'grey'

我在下面的代码中留下了这两种解决方案。 有什么想法吗？谢谢，如果不清楚，请询问

我的预打字代码：

suggestion: function (item) {

        var glassesColor = item.color;
        var html = "<li class='product-spot__variants-variant' style='background-color:"+ glassesColor +"' title='"+ glassesColor +"'>'"+ glassesColor +"'</li>";
        _.forEach(item.color, function (k) {
          if (typeof item.color === 'object') {
              html += "<li class='product-spot__variants-variant' style='background-color:"+ k +"' title='"+ k +"'>'"+ k +"'</li>";

              html = [];
              html.push("<li class='product-spot__variants-variant' style='background-color:" + k + "' title='" + k + "'>'" + k + "'</li>");
              var myhtml = html.join(''); 
              html = myhtml;   
          }
        });
        //console.log(html);
        var output = '<div class="search-autocomplete search-glasses">\n';
        output += '<a href="' + item.url + '">';
        output += (item.image ? '<img class="search-autocomplete__image" src="' + item.image + '" alt="' + item.title + '">' : '');
        output += '<span class="search-autocomplete__title">' + item.title + '</span>';
        output += (item.attribute ? '<span class="search-glasses__attribute">' + item.attribute + '</span>' : '');
        output += '<ul class="product-spot__variants">';
        output += html;
        output += '</ul>';
        output += '</a>\n';
        output += '</div>\n';
        return output;
      }

建议：功能（项目）{
var glassesColor=item.color；
var html=“
“+glassesColor+”
”；
_.forEach（项、颜色、功能（k）{
if（typeof item.color==='object'）{
html+=“
“+k+””
”；
html=[]；
html.push（“
“+k+”
”）；
var myhtml=html.join（“”）；
html=myhtml；
}
});
//log（html）；
变量输出='\n'；
输出+='\n'；
输出+='\n'；
返回输出；
}

好的，我刚刚为字符串创建了另一个条件，并将html equals代码放在那里。。 否则一切都很好

if (typeof item.color === 'string') {
          html = "<li class='product-spot__variants-variant' style='background-color:"+ glassesColor +"' title='"+ glassesColor +"'>'"+ glassesColor +"'</li>";
        }

if（typeof item.color=='string'）{
html=“
“+glassesColor+”
”；
}

if (typeof item.color === 'string') {
          html = "<li class='product-spot__variants-variant' style='background-color:"+ glassesColor +"' title='"+ glassesColor +"'>'"+ glassesColor +"'</li>";
        }