Question

我有两个数量的物品，比如说“意大利披萨”。

每个数量都有一些Toppings和Crustings，它们以单个对象的格式存在。

我试图以项目方式展示浇头和面包皮。

我想这样：

Item 1
Toppings
ToppingApple , ToppingMango

Item 2
Toppings
ToppingBanana , ToppingFlower

Crusts
CrustsBanana , CrustsFlower

我面临的问题是第2项配料也会在第1项下展示。

这是我的小提琴：

http://jsfiddle.net/cod7ceho/85/

你能告诉我如何解决这个问题吗？

这是我的代码

var item_name = 'italian pizza';
var quantity = '2';
var toppingsjson = {
    "Qty1": {
        "values": ["ToppingApple", "ToppingMango"],
        "name": "Qty1"
    },
    "Qty2": {
        "values": ["ToppingBanana", "ToppingFlower"],
        "name": "Qty2"
    }
};
var crutsjson = {

    "Qty2": {
        "values": ["CrustsBanana", "CrustsFlower"],
        "name": "Qty2"
    }
};

var headerstyle = '';
var divhtmltoppcrust = '';
for (var l = 0; l < 2; l++) {
    var toppingsul = '<ul>';
    var crustsul = '<ul>';
        for (var qty in toppingsjson) {
    var number = qty.match(/\d+/g);
    if (number.length) {
        number = number[0];

        toppingsul += "<li>" + toppingsjson[qty].values.join(",") + "</li>";

    }
}


        for (var qty in crutsjson) {
            var number = qty.match(/\d+/g);
            if (number.length) {
                number = number[0];
                crustsul += "<li>" + crutsjson[qty].values.join(",") + "</li>";
            }
        }
    var item = l + 1;
    divhtmltoppcrust += '<h5 style="display:' + headerstyle + '" >Item ' + item + '</h5><h6 >Toppings</h6> ' + toppingsul + ' <h6>Crusts</h6>' + crustsul + '';
}
var TreeMenu_Contentdiv = $('<div class="TreeMenu_Content" id="leafcontenttree"></div>');
var html = '<div class="lastItm_Wrap orders_margin_padding_none">\
                                <div class="prd_title"><h3>' + item_name + '</h3></div>\n\
                            <div class="Itm_left_aside">\n\
                                <div class="Itm_dtsl">\n\
                                    <div class="Qty_Wrap">\n\
                                        <p><b>Qty -' + quantity + '</b></p>\n\
                                    </div>\n\
                                 <div class="addonsList"><b></b>  ' + divhtmltoppcrust + ' </div>\n\
                                </div>\n\
                            </div>\n\
                        </div>';
TreeMenu_Contentdiv.html(html);
$(".MyOrdersdisplay").append(TreeMenu_Contentdiv);

Answer 1

我自己解决了这个问题。如果有类似需要的人，请使用此

var item_name = 'italian pizza';
var quantity = '2';
var toppingsjson = {

    "Qty1": {
        "values": ["T1qty1", "T2qty1"],
        "name": "Qty1"
    },


    "Qty4": {
        "values": ["T1qty1", "T2qty1"],
        "name": "Qty4"
    }

};
var crutsjson = {

    "Qty3": {
        "values": ["cqty1", "cqty1"],
        "name": "Qty3"
    }    

};

var headerstyle = '';
var divhtmltoppcrust = '';
for (var l = 0; l < 4; l++) {
    var toppingsul = '<ul>';
    var crustsul = '<ul>';
        for (var qty in toppingsjson) {
    var number = qty.match(/\d+/g);
            var s = l+1;
            if(number==s)
            {
    if (number.length) {
        number = number[0];


        toppingsul += "<li>" + toppingsjson[qty].values + "</li>";


    }
            }
}


        for (var qty in crutsjson) {
            var number = qty.match(/\d+/g);
             var s = l+1;
                        if(number==s)
                        {   
            if (number.length) {
                number = number[0];
                crustsul += "<li>" + crutsjson[qty].values.join(",") + "</li>";
            }
        }
        }
    var item = l + 1;

     toppingstyle = (toppingsul!='<ul>') ? "block":"none";
            cruststyle = (crustsul!='<ul>') ? "block":"none";


         if(toppingsul=='<ul>'&&crustsul=='<ul>')
    {
        headerstyle = 'none';
    }
    else
    {
        headerstyle = 'block';
    }

    divhtmltoppcrust+='<h5 style="display:'+headerstyle+'" >Item '+item+'</h5><h6 style="display:'+toppingstyle+'">Toppings</h6> '+toppingsul+' <h6 style="display:'+cruststyle+'">Crusts</h6>'+crustsul+'';

}
var TreeMenu_Contentdiv = $('<div class="TreeMenu_Content" id="leafcontenttree"></div>');
var html = '<div class="lastItm_Wrap orders_margin_padding_none">\
                                <div class="prd_title"><h3>' + item_name + '</h3></div>\n\
                            <div class="Itm_left_aside">\n\
                                <div class="Itm_dtsl">\n\
                                    <div class="Qty_Wrap">\n\
                                        <p><b>Qty -' + quantity + '</b></p>\n\
                                    </div>\n\
                                 <div class="addonsList"><b></b>  ' + divhtmltoppcrust + ' </div>\n\
                                </div>\n\
                            </div>\n\
                        </div>';
TreeMenu_Contentdiv.html(html);
$(".MyOrdersdisplay").append(TreeMenu_Contentdiv);

http://jsfiddle.net/cod7ceho/94/

Answer 2

这是你为http://jsfiddle.net/cod7ceho/96/所尝试的。您应该首先将JSON组合在一起，因为它更容易使用

var item_name = 'italian pizza';
var quantity = '2';
var toppingsjson = {
    "Qty1": {
        "values": ["ToppingApple", "ToppingMango"],
        "name": "Qty1"
    },
    "Qty2": {
        "values": ["ToppingBanana", "ToppingFlower"],
        "name": "Qty2"
    }
};
var crutsjson = {

    "Qty2": {
        "values": ["CrustsBanana", "CrustsFlower"],
        "name": "Qty2"
    }
};

var combinedResult={};

 for (var qty in toppingsjson) {
    var number = qty.match(/\d+/g);
    if (number.length) {
        combinedResult[qty]={};
        combinedResult[qty]["toppings"]= toppingsjson[qty].values.join(",");
        if(crutsjson[qty]){
            combinedResult[qty]["crusts"]= crutsjson[qty].values.join(",");
        }
    }
}

for (var qty in crutsjson) {
    var number = qty.match(/\d+/g);
    if (number.length) {
        if(!combinedResult[qty]){
            combinedResult[qty]={};
            combinedResult[qty]["crusts"]= crutsjson[qty].values.join(",");
        }
    }
}

for (var qty in combinedResult) {
    var number = qty.match(/\d+/g);
    if (number.length) {
        var $template=$('.template').clone();
        $template.removeClass('template');
        $template.find('.itemName').text('Item '+number);
        if(combinedResult[qty]["toppings"]){
            $template.find('.toppingList').removeClass('hidden').children('li').text(combinedResult[qty]["toppings"]);
        }
        if(combinedResult[qty]["crusts"]){
            $template.find('.crustList').removeClass('hidden').children('li').text(combinedResult[qty]["crusts"]);
        }
    }
    $(".MyOrdersdisplay").append($template);
}

如何使用匹配以便仅提取特定数据

2 个答案: