如何在新行中显示它

Question

我从后端收到回复

{
    "toppings": [
        {
            "name": "Quantity1",
            "value": [
                "HoneywithChocolateSauce10ML",
                "HoneywithCarmel20ML",
                "HoneywithCarmel10ML"
            ]
        }
    ]
}

我正在以下面的方式解析它并动态地形成HTML

else if(toppins.length >= 0)
{
var uitaghtml = '<ul>';
for (var d = 0; d < toppins.length; d++) {
 var uitaghtml = '<ul>' +
             '<li>' + toppins[d].value + '</li>' +
            '</ul>';

itemcart ='<div class="order-listdetails-wrap"> 
                    <div class="orderTitle">'+itemname+'</div> 
                    <div class="orderCont"> 
                        <div class="img"><img src="'+image+'"/></div> 
                        <div class="orderPrice"> 
                            <p>Qty: <span>1</span></p> 
                             ' + uitaghtml + '</ul> 
                        </div> 
                    </div> 
                </div>';


                divhtml.append(itemcart);
    }
}

通过以上方式，HTML以这种方式显示

而不是逗号分隔值，如何一个接一个地显示？

Answer 1

您正在打印出数据的value属性，但该属性是一个数组。你应该迭代它。我在这里使用jQuery完成了它：

var uitaghtml = '<ul>';
$.each(toppins[d].value, function(i, text) { 
     uitaghtml += "<li>" + text + "</li>";
});
uitaghtml += "</ul>";

您可能还想考虑使用Underscore或Handlebars等JavaScript模板库来帮助您从源代码中获取HTML。

Answer 2

您需要遍历值：

for (var d = 0; d < toppins.length; d++) {
    var uitaghtml = '<ul>';
    for (var v = 0; v < toppins[d].value.length; v++) {
        uitaghtml += '<li>' + toppins[d].value[v] + '</li>' +
    }
    uitaghtml += '</ul>';

    // ... 
}

Answer 3

试试这个，

var x={
"toppings": [
    {
        "name": "Quantity1",
        "value": [
            "HoneywithChocolateSauce10ML",
            "HoneywithCarmel20ML",
            "HoneywithCarmel10ML"
        ]
    }
]
};


 $.each(x.toppings[0].value,function(i,v){
      var uitaghtml = '<li>' + v + '</li>';
     console.log(uitaghtml);
 });