尝试使用HTML数据属性来匹配来自两个数据库的数据

时间:2017-03-27 14:22:41

标签: javascript jquery json html5

我在下面的代码中会在页面上呈现一些产品。这些产品中的每一个都共享相同的数据属性“data-item-upc”。还有一个为页面上的每个产品呈现的按钮(确切地说,总共6个按钮)。它们都共享相同的data-item-upc数据属性。

我能够成功获取数据atrribute的值,并将其与第二个数据库中具有相同UPC值的项匹配。但由于某种原因,只有第一个按钮工作并显示模态。不知道最近发生了什么。希望有人可以帮助我,我会非常感激。

//declare variable to store JSON data
var product_data = {};
var nutritional_data = {};

$(document).ready(function() {

      'use strict';

      //grab product data
      $.ajax({
        dataType: "jsonp",
        url: 'path to URL',
        cache: true,
        success: function(data){
          //assign JSON to product data variable
          product_data = JSON.parse(JSON.stringify(data).replace(/"\s+|\s+"/g,'"'));

      //grab nutrional data   
      $.ajax({
        dataType: "jsonp",
        url: 'path to URL',
        cache: true,
        success: function(json){
          //assign JSON to product data variable
          nutritional_data = JSON.parse(JSON.stringify(json).replace(/"\s+|\s+"/g,'"'));

          //declare divs to store data
          var productDivOne = '';
          var productDivTwo = '';

          $.each(product_data, function(i, item) {
              //convert JSON strings to uppercase for comparison
              var brandLetter = item.itemBrandLetter.toUpperCase();
              var foodService = item.itemDeli.toUpperCase();
              var brandItem = item.itemName;

              if (brandLetter == "LB" && foodService == "N") {
                  if (brandItem.indexOf("Panettone") >= 0)  { 
                    productDivOne += 
                    '<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
                        '<div class="thumbnail">' + 
                            '<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
                            '<div class="caption">' + '<br>' + 
                                '<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
                                '<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
                                '<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +    
                            '</div>' +
                        '</div>' +
                    '</div>';
                  }
                  if (brandItem.indexOf("Egg") >= 0)  { 
                    productDivTwo += 
                    '<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
                        '<div class="thumbnail">' + 
                            '<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
                            '<div class="caption">' + '<br>' + 
                                '<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
                                '<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
                                '<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +    
                            '</div>' +
                        '</div>' +
                    '</div>';
                  }
              }
          });

          //show nutritional information on button click
          $("body").on('click', ".showNutritionFacts", function(event){

            //get passed data from other function
            var clickedItemUPC = $(this).data('item-upc');
            alert(clickedItemUPC);

            //declare variables to store data
            var servingSize = '';
            var servingPerContainer = '';
            var calories = '';
            var caloriesFat = '';
            var totalFatGrams = '';
            var totalFatPercentage = '';
            var saturatedFatGrams = '';
            var saturatedFatPercentage = '';
            var transFatGrams = '';
            var polyunsaturatedFatGrams = '';
            var monounsaturatedFatGrams = '';
            var cholesterolGrams = '';
            var cholesterolPercentage = '';
            var sodiumGrams = '';
            var sodiumPercentage = '';
            var totalCarbohydrateGrams = '';
            var totalCarbohydratePercentage = '';
            var dietaryFiberGrams = '';
            var dietaryFiberPercentage = '';
            var sugarGrams = '';
            var sugarGramsAdded = '';
            var sugarGramsAddedPercentage = '';
            var proteinGrams = '';
            var vitaminAPercentage = '';
            var vitaminCGrams = '';
            var vitaminCPercentage = '';
            var vitaminDGrams = '';
            var vitaminDPercentage = '';
            var calciumGrams = '';
            var calciumPercentage = '';
            var ironGrams = '';
            var ironPercentage = '';
            var potassiumGrams = '';
            var potassiumPercentage = '';
            var thiamineGrams = '';
            var thiaminePercentage = '';
            var riboflavinGrams = '';
            var riboflavinPercentage = '';
            var niacinGrams = '';
            var niacinPercentage = '';
            var ingredients = '';

                //comparison UPC variable
                var compareNutUPC;

                $.each(nutritional_data, function (i, item) {

                   //assign comparison UPC to itemNum
                   compareNutUPC = item.itemNum;

                   //compare product UPC in nutritional and product data
                   if (clickedItemUPC == compareNutUPC) {

                      servingSize += item.servingSize;
                      servingPerContainer += item.itemServings;
                      calories += item.itemCalories;
                      caloriesFat += item.itemCaloriesFromFat;
                      transFatGrams += item.itemTransFat + 'g';
                      polyunsaturatedFatGrams += item.itemPolyUnsatFat + 'g';
                      monounsaturatedFatGrams += item.itemMonoUnsatFat + 'g';
                      saturatedFatGrams += item.itemSaturFat + 'g';
                      saturatedFatPercentage += item.itemSaturFatPerc + '%';
                      totalFatGrams += item.itemTotalFat + 'g';
                      totalFatPercentage += item.itemTotalFatPerc + '%';
                      cholesterolGrams += item.itemCholesterol + 'mg';
                      cholesterolPercentage += item.itemCholesterolPerc + '%';
                      sodiumGrams += item.itemSodium + 'mg';
                      sodiumPercentage += item.itemSodiumPerc + '%';
                      totalCarbohydrateGrams += item.itemTotalCarb + 'g';
                      totalCarbohydratePercentage += item.itemTotalCarbPerc + '%';
                      sugarGrams += item.itemSugars + 'g';
                      sugarGramsAdded += item.itemSugarsAdded + 'g';
                      sugarGramsAddedPercentage += item.itemSugarsAddedPerc + '%';
                      dietaryFiberGrams += item.itemDietFiber + 'g';
                      dietaryFiberPercentage += item.itemDietFiberPerc + '%';
                      proteinGrams += item.itemProtein + 'g';
                      vitaminAPercentage += item.itemVitaminA + '%';
                      vitaminCPercentage += item.itemVitaminC + '%';
                      vitaminDGrams += item.itemVitaminDMeasure;
                      vitaminDPercentage += item.itemVitaminD + '%';
                      calciumGrams += item.itemCalciumMeasure;
                      calciumPercentage += item.itemCalcium + '%';
                      ironGrams += item.itemIronMeasure;
                      ironPercentage += item.itemIron + '%';
                      thiaminePercentage += item.itemThiamin + '%';
                      riboflavinPercentage += item.itemRiboflavin + '%';
                      niacinPercentage += item.itemNiacin + '%';
                      potassiumGrams += item.itemPotassium;
                      potassiumPercentage += item.itemPotassiumPerc + '%';
                      ingredients += item.itemIngredients;
                   } 
                });

                $(".servingSize").html(servingSize.replace(/\s+(?=g)/g, '').toLowerCase());
                $(".servingPerContainer").html(servingPerContainer);
                $(".calories").html(calories);
                $(".caloriesFat").html(caloriesFat);
                $(".transFatGrams").html(transFatGrams);
                $(".polyunsaturatedFatGrams").html(polyunsaturatedFatGrams);
                $(".monounsaturatedFatGrams").html(monounsaturatedFatGrams);
                $(".saturatedFatGrams").html(saturatedFatGrams);
                $(".saturatedFatPercentage").html(saturatedFatPercentage);
                $(".totalFatGrams").html(totalFatGrams);
                $(".totalFatPercentage").html(totalFatPercentage);
                $(".cholesterolGrams").html(cholesterolGrams);
                $(".cholesterolPercentage").html(cholesterolPercentage);
                $(".sodiumGrams").html(sodiumGrams);
                $(".sodiumPercentage").html(sodiumPercentage);
                $(".totalCarbohydrateGrams").html(totalCarbohydrateGrams);
                $(".totalCarbohydratePercentage").html(totalCarbohydratePercentage);
                $(".sugarGrams").html(sugarGrams);
                $(".sugarGramsAdded").html(sugarGramsAdded);
                $(".sugarGramsAddedPercentage").html(sugarGramsAddedPercentage);
                $(".dietaryFiberGrams").html(dietaryFiberGrams);
                $(".dietaryFiberPercentage").html(dietaryFiberPercentage);
                $(".proteinGrams").html(proteinGrams);
                $(".vitaminAPercentage").html(vitaminAPercentage);
                $(".vitaminCPercentage").html(vitaminCPercentage);
                $(".vitaminDGrams").html(vitaminDGrams);
                $(".vitaminDPercentage").html(vitaminDPercentage);
                $(".calciumGrams").html(calciumGrams);
                $(".calciumPercentage").html(calciumPercentage);
                $(".ironGrams").html(ironGrams);
                $(".ironPercentage").html(ironPercentage);
                $(".thiaminePercentage").html(thiaminePercentage);
                $(".riboflavinPercentage").html(riboflavinPercentage);
                $(".niacinPercentage").html(niacinPercentage);
                $(".potassiumGrams").html(potassiumGrams);
                $(".potassiumPercentage").html(potassiumPercentage);
                $(".ingredients").html(ingredients.toUpperCase());

                //determine which modal to show
                if ($('.vitaminDGrams:contains("mcg")').length > 0 && $('.calciumGrams:contains("mg")').length > 0 && $('.ironGrams:contains("mg")').length > 0) {
                    $('.nutritionPopupAlternate').modal('show');   
                } else if (servingSize == 0) {
                    $('.nutritionPopupNoInfo').modal('show');
                } else {
                    $('.nutritionPopupStandard').modal('show');
                }

          });

          //append to appropriate div
          $('#productDivOne').html(productDivOne);
          $('#productDivTwo').html(productDivTwo);

        }
      });
     //end of prod data
     }
   });
   //end of nut data
});  

1 个答案:

答案 0 :(得分:0)

感谢Sandy,我能够缩小代码并找到问题。原来它正在寻找稍后从我拍摄的不同源代码中添加的东西,在编辑完DIV后它现在完美地工作。