在javascript

Question

目标：根据数组内的值动态填充内嵌ul和图像。如果数组具有与图像对应的值，则将显示相应的图像。

我的阵列将具有“有机”，“古老”，“素食”，“无大豆”以及其他涉及食物的描述。

对于我的代码，我将引用的数组的名称将是state.greens [0]（或更通用的state.greens [n] .features），并且由于我现有的代码，它会更容易传递state.greens [0]作为参数而不是state.greens [0] .features，所以如果可能的话，我更愿意这样做。

我的代码：

var icons = function(array) {
    var pics = {
        Organic: "http://www.healthkismet.com/img/picker/icon.png",
        Vegan: "http://www.healthkismet.com/img/picker/vegan.png",
        Paleo: "http://www.healthkismet.com/img/picker/paleo.png"
    }

    for (var i = 0; i < array.features.length; i++) {
        $(".info ul").append("<li><img src=" + pics.array.features[i] + "></img></li>");
    }
}

HTML （使用Twitter bootstrap）

<div class="info">
    <ul class="list-inline">
    </ul>
</div>

这里的想法是，如果以下情况属实：

state.greens[0].features = ["Organic", "Paleo"]

然后ul会像这样填充：

<div class="info">
  <ul class="list-inline">
    <li><img src="pics.Organic"></img></li>
    <li><img src="pics.Paleo"></img></li>
  </ul>
</div>

图像会显示出来。

现在我收到以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined

我认为它没有将pics.state.greens [0] .features [i]变成任何值。

任何帮助将不胜感激。谢谢。